Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8788085

Browse files
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
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>
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+
});
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+
}
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)

AltStyle によって変換されたページ (->オリジナル) /