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 9de2814

Browse files
committed
Initial Commit
0 parents commit 9de2814

Some content is hidden

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

51 files changed

+1345
-0
lines changed

‎Accordian/acoordian.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
[
2+
{
3+
"id": "1",
4+
"question": "What are accordion components?",
5+
"answer":
6+
"Accordion components are user interface elements used for organizing and presenting content in a collapsible manner. They typically consist of a header, content, and an expand/collapse action."
7+
},
8+
{
9+
"id": "2",
10+
"question": "What are they used for?",
11+
"answer":
12+
"They are commonly employed in various contexts, including FAQs, product descriptions, navigation menus, settings panels, and data tables, to save screen space and provide a structured and user-friendly interface for presenting information or options."
13+
},
14+
{
15+
"id": "3",
16+
"question": "Accordion as a musical instrument",
17+
"answer":
18+
"The accordion is a musical instrument with a keyboard and bellows. It produces sound by air passing over reeds when the player expands or compresses the bellows, used in various music genres."
19+
},
20+
{
21+
"id": "4",
22+
"question": "Can I create an accordion component with a different framework?",
23+
"answer":
24+
"Yes of course, it is very possible to create an accordion component with another framework."
25+
}
26+
]

‎Accordian/app.js

Whitespace-only changes.

‎Accordian/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Accordian</title>
7+
</head>
8+
<body>
9+
10+
</body>
11+
</html>

‎Accordian/style.css

Whitespace-only changes.

‎Change Body Color/ChangeBodyColor.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Change Body Color</title>
7+
<script src="ChangeBodyColor.js" defer></script>
8+
<style>
9+
input{
10+
display: table;
11+
margin: auto;
12+
width: 20vw;
13+
height: 7vh;
14+
border-radius: 10px;
15+
border: 2px black solid;
16+
margin-top: 15%;
17+
background-color: transparent;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
<input type="color" name="color" id="color" value="#ffffff">
23+
</body>
24+
</html>

‎Change Body Color/ChangeBodyColor.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const input = document.querySelector("#color");
2+
const body = document.body
3+
4+
input.addEventListener("input", ()=>{
5+
const color = input.value;
6+
body.style.backgroundColor = color;
7+
})

‎Control css variables/RDJ.jpg

16.8 KB
Loading[フレーム]

‎Control css variables/app.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const inputs = document.querySelectorAll('.controls input');
2+
3+
inputs.forEach((inp)=>{
4+
inp.addEventListener('change',(e)=>{
5+
let variable = e.target.name;
6+
let value = e.target.value;
7+
8+
document.documentElement.style.setProperty(`--${variable}`, `${value}px`);
9+
})
10+
})

‎Control css variables/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Contol CSS Variables</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="app.js" defer></script>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="controls">
13+
<div class="spacing box">
14+
<p>Spacing</p>
15+
<input type="range" name="spacing" id="" min="10" max="100" value="10">
16+
</div>
17+
<div class="spacing box">
18+
<p>Blur</p>
19+
<input type="range" name="blur" id="" min="0" max="30" value="0">
20+
</div>
21+
</div>
22+
<div class="image-container">
23+
<img src="RDJ.jpg" alt="">
24+
</div>
25+
</div>
26+
</body>
27+
</html>

‎Control css variables/style.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
list-style: none;
6+
text-decoration: none;
7+
}
8+
9+
:root{
10+
--spacing:10px;
11+
--blur: 0px;
12+
}
13+
14+
html, body{
15+
height: 100%;
16+
width: 100%;
17+
}
18+
19+
.container{
20+
text-align: center;
21+
margin: 5vw;
22+
}
23+
24+
.controls{
25+
display: flex;
26+
justify-content: center;
27+
align-items: center;
28+
gap: 10vw;
29+
margin: 2vw;
30+
font-size: 25px;
31+
font-weight: 600;
32+
}
33+
34+
.box{
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
gap: 5%;
39+
}
40+
41+
.image-container{
42+
width: 50%;
43+
background-color: yellow;
44+
display: table;
45+
margin: auto;
46+
padding: var(--spacing);
47+
48+
}
49+
50+
.image-container img{
51+
width: 100%;
52+
filter: blur(var(--blur));
53+
}

0 commit comments

Comments
(0)

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