Skip to content

Commit 8788085

Browse files
sahandghavidelsahandghavidel
committed
add 12 new projects
1 parent 17eeae6 commit 8788085

File tree

55 files changed

+5644
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+5644
-0
lines changed

‎projects/anime-pics-genrator/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Random Anime profile</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<script src="script.js" defer></script>
10+
</head>
11+
<body>
12+
<!-- main container -->
13+
<div class="main-container">
14+
<!-- the anime container -->
15+
<div class="anime-container">
16+
<h3>Anime Pics Genrator</h3>
17+
<h2>genrates Random Animes profile pics</h2>
18+
<button id="btn" class="get-anime">Get Anime</button>
19+
<!-- the anime box -->
20+
<div class="anime-box">
21+
<div class="hero-img">
22+
<img
23+
src="https://w.wallhaven.cc/full/lq/wallhaven-lqxr3y.jpg"
24+
class="anime"
25+
alt="hero-img"
26+
/>
27+
</div>
28+
<div class="hero-name">
29+
<h3></h3>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</body>
35+
</html>

‎projects/anime-pics-genrator/script.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const getBTN = document.getElementById("btn");
2+
const animeBox = document.querySelector(".anime-box");
3+
const anime = document.querySelector(".anime");
4+
const animeName = document.querySelector(".hero-name");
5+
6+
const api_url = `https://api.catboys.com/img`;
7+
8+
getBTN.addEventListener("click", async function () {
9+
const response = await fetch(api_url);
10+
const data = await response.json();
11+
anime.src = data.url;
12+
animeBox.style.display = "block";
13+
animeName.textContent = data.artist;
14+
});

‎projects/anime-pics-genrator/style.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Poppins", sans-serif;
9+
font-weight: normal;
10+
background: linear-gradient(to right, #00afff, #00ff6c);
11+
display: flex;
12+
flex-direction: column;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
overflow: hidden;
17+
margin: 0;
18+
}
19+
20+
.main-container {
21+
background-color: rgba(255, 255, 255, 0.863);
22+
border-radius: 10px;
23+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
24+
text-align: center;
25+
padding: 10px;
26+
max-width: 100%;
27+
width: 800px;
28+
}
29+
30+
.anime-container h3 {
31+
font-size: 20px;
32+
font-weight: 600;
33+
text-transform: capitalize;
34+
padding-bottom: 10px;
35+
letter-spacing: 0.9px;
36+
}
37+
38+
.anime-container h2 {
39+
line-height: 30px;
40+
word-spacing: 1px;
41+
margin-bottom: 30px;
42+
position: relative;
43+
}
44+
45+
.get-anime {
46+
margin-bottom: 30px;
47+
background-color: rgba(0, 0, 0, 0.774);
48+
color: #fff;
49+
padding: 10px 30px;
50+
border: none;
51+
border-radius: 6px;
52+
outline: none;
53+
font-size: 16px;
54+
font-weight: 200;
55+
cursor: pointer;
56+
letter-spacing: 1px;
57+
}
58+
59+
.anime-box {
60+
display: none;
61+
}
62+
63+
.anime-box img {
64+
height: 300px;
65+
width: 300px;
66+
border-radius: 50%;
67+
border: 10px solid #005da3;
68+
align-items: center;
69+
}
70+
71+
.hero-name {
72+
margin-bottom: 30px;
73+
background-color: rgba(0, 0, 0, 0.774);
74+
color: #fff;
75+
padding: 10px 30px;
76+
border: none;
77+
border-radius: 6px;
78+
outline: none;
79+
font-size: 17px;
80+
font-weight: bold;
81+
}
82+
83+
@media screen and (max-width: 500px) {
84+
.main-container {
85+
width: 450px;
86+
flex-wrap: wrap;
87+
}
88+
}

‎projects/bmi-calculator/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8+
<title>BMI</title>
9+
<style>
10+
*{
11+
padding: 10px;
12+
margin: 10px;
13+
}
14+
p{
15+
font-weight: bold;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
<div class="container d-block text-center">
21+
<h2 class="p-2">Body Mass Index Calculator using Metric Units</h2>
22+
Your Height: <input class="p-2 m-2" type="number" name="cm" id="cm" placeholder="centimeters">
23+
<br/>
24+
Your Weight: <input class="p-2 m-2" type="number" name="weight" id="weight" placeholder="kilograms">
25+
<br/>
26+
<button class="btn btn-primary p-2 m-2" onclick="fun()">Compute BMI</button><br/>
27+
Your BMI: <input class="p-2 m-2" type="text" name="bmi" id="bmi" disabled>
28+
<h4 class="p-2 m-2"></h4>
29+
</div>
30+
31+
</body>
32+
</html>
33+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></script>
34+
<script src="./script.js"></script>

‎projects/bmi-calculator/script.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
function fun()
2+
{
3+
var cm = document.getElementById("cm").value ;
4+
cm = cm/100;
5+
var w = document.getElementById("weight").value;
6+
var bmi = w/(cm*cm);
7+
document.getElementById("bmi").value = bmi;
8+
if(bmi<18.5)
9+
{
10+
document.querySelector("h4").innerHTML = 'Under weight';
11+
}
12+
else if(bmi>=18.5 && bmi <=24.9)
13+
{
14+
document.querySelector("h4").innerHTML = 'Normal weight';
15+
}
16+
else if(bmi>=25 && bmi <= 29.9)
17+
{
18+
document.querySelector("h4").innerHTML = 'Overweight';
19+
}
20+
else if(bmi>=30)
21+
{
22+
document.querySelector("h4").innerHTML = 'Obesity';
23+
}
24+
}

‎projects/cat-api/45_Chatting_app/client/index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="stylesheet" href="styles.css">
5+
<!-- <link rel="stylesheet" href="formStyle.css"> -->
6+
<meta charset="UTF-8">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<script src="https://code.iconify.design/2/2.0.3/iconify.min.js"></script>
10+
<title>Warta - Chatting App</title>
11+
</head>
12+
<body>
13+
<div class="new-room">
14+
<h1>Warta App</h1>
15+
<form id="createForm" name="roomF" onsubmit="return viewSelection()">
16+
<input type="text" id="name" name="nameInput" placeholder="Enter your name" autocomplete="off" autofocus><br>
17+
<div class="radio">
18+
19+
<input type="radio" id="create-room" class="choose" name="choose" onclick="javascript:checkSelection();" value="create"> <label for="create-room" class="lableCreate">Create room </label>
20+
21+
<!-- </div>
22+
<div style="display: flex;"> -->
23+
24+
<input type="radio" id="join-room" class="choose" style="margin-left: 3%;" name="choose" onclick="javascript:checkSelection();" value="join"> <label for="join-room" class="lableJoin">Join room </label><br>
25+
26+
</div>
27+
<!-- <input type="text" id="roomJ" class="room" name="room" placeholder="Enter room name"><br> -->
28+
<input type="text" id="roomC" class="room" name="room" placeholder="Create room name" autocomplete="off" autofocus><br>
29+
30+
<input class="button-submit" onclick="javascript:viewSelection();" type="button" value="Next" >
31+
</form>
32+
</div>
33+
<div class="chat">
34+
<div class="status-bar">
35+
<h2>Warta App</h2>
36+
<h4></h4>
37+
</div>
38+
39+
<div class="chat-container">
40+
<div class="conversation">
41+
<div class="conversation-container">
42+
43+
44+
</div>
45+
<form id="form-container" onclick="return checkNull();">
46+
<input class="input-msg" name="input" placeholder="Type a message" autocomplete="off" autofocus></input>
47+
<button class="send" type="submit">
48+
<div class="circle">
49+
<span class="iconify" data-icon="zmdi:mail-send"></span>
50+
</div>
51+
</button>
52+
</form>
53+
</div>
54+
</div>
55+
</div>
56+
<!-- <script src="http://localhost:8000/socket.io/socket.io.js"></script> -->
57+
<script src='https://guarded-falls-33664.herokuapp.com/socket.io/socket.io.js'></script>
58+
59+
<!-- <script src="node_modules/socket.io-client/dist/socket.io.js"></script> -->
60+
<script src="index.js"></script>
61+
<script>
62+
function checkNull(){
63+
if(document.querySelector(".input-msg").value === ''){
64+
return false;
65+
}
66+
}
67+
68+
function checkSelection(){
69+
70+
if(document.querySelector(".radio #create-room").checked){
71+
document.querySelector("#roomC").style.visibility = 'visible';
72+
}
73+
if(document.querySelector(".radio #join-room").checked){
74+
document.querySelector("#roomC").style.visibility = 'visible';
75+
document.querySelector("#roomC").placeholder="Enter room name";
76+
}
77+
}
78+
79+
function validateForm() {
80+
if(document.forms["roomF"]["nameInput"].value === '') {
81+
alert("Name cannot be empty");
82+
return false;
83+
}
84+
if(document.querySelector("#roomC").value === ''){
85+
alert("Please provide a room name");
86+
return false;
87+
}
88+
}
89+
</script>
90+
</body>
91+
</html>

0 commit comments

Comments
 (0)