├── Analog-saat
    ├── index.html
    ├── main.css
    └── main.js
├── Animasyonlu-loading
    ├── index.html
    ├── main.css
    └── main.js
├── Animation-landing
    ├── app.js
    ├── index.html
    └── style.css
├── Açılır-kapanır-search
    ├── index.html
    ├── main.css
    └── main.js
├── Blur_İmage
    ├── 1.jpg
    ├── index.html
    ├── main.css
    └── main.js
├── Bolunmus-Acilis-Sayfasi
    ├── index.html
    ├── main.css
    └── main.js
├── Button_Effect
    ├── index.html
    ├── main.css
    └── main.js
├── Calculator
    ├── index.html
    ├── main.css
    └── main.js
├── Dalga-Animasyonu
    ├── index.html
    ├── main.css
    └── main.js
├── Dark-Light-Theme
    ├── app.js
    ├── index.html
    └── style.css
├── Feedback
    ├── index.html
    ├── main.css
    └── main.js
├── Genisleyen-Kartlar
    ├── index.html
    ├── main.css
    └── main.js
├── Geri_Sayım
    ├── app.js
    └── index.html
├── Github-Profil-card
    ├── index.html
    ├── main.css
    └── main.js
├── Grocery_List
    ├── index.html
    ├── main.css
    └── main.js
├── Hava durumu
    ├── 1.jpg
    ├── index.html
    ├── main.css
    └── main.js
├── Hidden_Search
    ├── index.html
    ├── main.css
    └── main.js
├── Hoverboard
    ├── index.html
    ├── main.css
    └── main.js
├── Loading__Animation
    ├── index.html
    └── main.css
├── Menu
    ├── images
    │   ├── item-1.jpeg
    │   ├── item-10.jpeg
    │   ├── item-2.jpeg
    │   ├── item-3.jpeg
    │   ├── item-4.jpeg
    │   ├── item-5.jpeg
    │   ├── item-6.jpeg
    │   ├── item-7.jpeg
    │   ├── item-8.jpeg
    │   └── item-9.jpeg
    ├── index.html
    ├── logo.svg
    ├── main.css
    ├── main.js
    └── menu-item.jpeg
├── Mobil_Navigation
    ├── index.html
    ├── main.css
    └── main.js
├── Modal
    ├── hero.jpeg
    ├── index.html
    ├── logo.svg
    ├── main.css
    └── main.js
├── Navbar
    ├── index.html
    ├── logo.svg
    ├── main.css
    └── main.js
├── Notes
    ├── image
    │   ├── cork.png
    │   └── pin.png
    ├── index.html
    ├── main.css
    └── main.js
├── Notification
    ├── index.html
    ├── main.css
    └── main.js
├── Password_Strenght_TailwindCSS
    ├── image
    │   └── shopping.png
    ├── index.html
    ├── main.css
    └── main.js
├── Progress-Steps
    ├── index.html
    ├── main.css
    └── main.js
├── Questions
    ├── index.html
    ├── logo.svg
    ├── main.css
    └── main.js
├── README.md
├── Random-Image
    ├── index.html
    ├── main.css
    └── main.js
├── Random-Password
    ├── app.js
    ├── index.html
    └── style.css
├── Scroll Animasyonu
    ├── index.html
    ├── main.css
    └── main.js
├── Sesler
    ├── app.js
    ├── index.html
    ├── sesler
    │   ├── applause.mp3
    │   ├── boo.mp3
    │   ├── gasp.mp3
    │   ├── tada.mp3
    │   ├── victory.mp3
    │   └── wrong.mp3
    └── style.css
├── Sidebar
    ├── index.html
    ├── logo.svg
    ├── main.css
    └── main.js
├── Simple To Do List-2
    ├── index.html
    ├── main.css
    └── main.js
├── Slider
    ├── app.js
    ├── image
    │   ├── 1.jpg
    │   ├── 1.png
    │   ├── 2.jpg
    │   ├── 2.png
    │   ├── 3.jpg
    │   ├── 3.png
    │   ├── 4.jpg
    │   └── 5.png
    ├── index.html
    ├── main.css
    ├── main.js
    └── style.css
├── Stick_Navbar
    ├── index.html
    ├── main.css
    └── main.js
├── Surukle_Birak
    ├── index.html
    ├── main.css
    └── main.js
├── Tabs
    ├── hero-bcg.jpeg
    ├── index.html
    ├── main.css
    └── main.js
├── Video
    ├── index.html
    ├── logo.svg
    ├── main.css
    ├── main.js
    ├── preloader.gif
    └── video.mp4
├── counter
    ├── index.html
    ├── main.css
    └── main.js
├── css-loader
    ├── app.js
    ├── index.html
    └── style.css
├── drag-and-drop-chess
    ├── index.html
    ├── king.png
    ├── main.css
    └── main.js
├── ilerleme-adimlari
    ├── index.html
    ├── main.css
    └── main.js
├── random renk
    ├── app.js
    ├── index.html
    └── style.css
└── to do list
    ├── index.html
    ├── main.css
    └── main.js


/Analog-saat/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Analog Clock</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <div class="clock">
14 |             <div class="circle" id="sc" style="--clr:#04fc43"><i></i></div>
15 |             <div class="circle circle2" id="mn" style="--clr:#fee800"><i></i></div>
16 |             <div class="circle circle3" id="hr" style="--clr:#ff2972"><i></i></div>
17 | 
18 |             <span style="--i:1"><b>1</b></span>
19 |             <span style="--i:2"><b>2</b></span>
20 |             <span style="--i:3"><b>3</b></span>
21 |             <span style="--i:4"><b>4</b></span>
22 |             <span style="--i:5"><b>5</b></span>
23 |             <span style="--i:6"><b>6</b></span>
24 |             <span style="--i:7"><b>7</b></span>
25 |             <span style="--i:8"><b>8</b></span>
26 |             <span style="--i:9"><b>9</b></span>
27 |             <span style="--i:10"><b>10</b></span>
28 |             <span style="--i:11"><b>11</b></span>
29 |             <span style="--i:12"><b>12</b></span>
30 |         </div>
31 | 
32 |         <!-- Digital Clock -->
33 |         <div id="time">
34 |             <div id="hours" style="--clr:#ff2972">00</div>
35 |             <div id="minutes" style="--clr:#fee800">00</div>
36 |             <div id="seconds" style="--clr:#04fc43">00</div>
37 |             <div id="ampm">AM</div>
38 |         </div>
39 |     </div>
40 | 
41 |     <script src='main.js'></script>
42 | </body>
43 | </html>


--------------------------------------------------------------------------------
/Analog-saat/main.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     box-sizing: border-box;
  7 |     font-family: 'Poppins', sans-serif;
  8 | }
  9 | 
 10 | body{
 11 |     display: flex;
 12 |     justify-content: center;
 13 |     align-items: center;
 14 |     min-height: 100vh;
 15 |     background: #2f363e;
 16 | }
 17 | 
 18 | .container{
 19 |     position: relative;
 20 |     background: #2f363e;
 21 |     /* min-height: 500px; */
 22 |     border-radius: 20px;
 23 |     border-top-left-radius: 225px;
 24 |     border-top-right-radius: 225px;
 25 |     box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.75), 
 26 |     10px 50px 70px rgba(0,0,0,0.25), 
 27 |     inset 5px 5px 10px rgba(0,0,0,0.25),
 28 |     inset 5px 5px 20px rgba(255,255,255,0.2),
 29 |     inset -5px -5px 15px rgba(0,0,0,0.75);
 30 |     display: flex;
 31 |     justify-content: center;
 32 |     align-items: center;
 33 |     flex-direction: column;
 34 | }
 35 | 
 36 | .clock{
 37 |     position: relative;
 38 |     width: 450px;
 39 |     height: 450px;
 40 |     background: #2f363e;
 41 |     border-radius: 50%;
 42 |     box-shadow: 10px 50px 70px rgba(0,0,0,0.25), 
 43 |     inset 5px 5px 10px rgba(0,0,0,0.25),
 44 |     inset 5px 5px 20px rgba(255,255,255,0.2),
 45 |     inset -5px -5px 15px rgba(0,0,0,0.75);
 46 |     display: flex;
 47 |     justify-content: center;
 48 |     align-items: center;
 49 |     margin-bottom: 30px;
 50 | }
 51 | 
 52 | .clock::before{
 53 |     content: '';
 54 |     position: absolute;
 55 |     width: 8px;
 56 |     height: 8px;
 57 |     background: #2f363e;
 58 |     border: 3px solid #fff;
 59 |     border-radius: 50%;
 60 |     z-index: 11;
 61 | }
 62 | 
 63 | .clock span{
 64 |     position: absolute;
 65 |     inset: 20px;
 66 |     color: #fff;
 67 |     text-align: center;
 68 |     /* 360/12 = 30deg */
 69 |     transform: rotate(calc(30deg*var(--i)));
 70 | }
 71 | 
 72 | .clock span b{
 73 |     font-size: 2em;
 74 |     opacity: 0.25;
 75 |     font-weight: 600;
 76 |     display: inline-block;
 77 |     transform: rotate(calc(-30deg*var(--i)));
 78 | }
 79 | 
 80 | .circle{
 81 |     position: absolute;
 82 |     width: 300px;
 83 |     height: 300px;
 84 |     border: 2px solid rgba(0, 0, 0, 0.25);
 85 |     border-radius: 50%;
 86 |     display: flex;
 87 |     justify-content: center;
 88 |     align-items: flex-start;
 89 | }
 90 | 
 91 | .circle i{
 92 |     position: absolute;
 93 |     width: 6px;
 94 |     height: 50%;
 95 |     background: var(--clr);
 96 |     opacity: 0.75;
 97 |     transform-origin: bottom;
 98 |     transform: scaleY(0.5);
 99 |     z-index: 10;
100 | }
101 | 
102 | .circle:nth-child(1) i{
103 |     width: 2px;
104 | }
105 | 
106 | .circle:nth-child(2) i{
107 |     width: 6px;
108 | }
109 | 
110 | .circle2{
111 |     width: 240px;
112 |     height: 240px;
113 |     z-index: 9;
114 | }
115 | 
116 | .circle3{
117 |     width: 180px;
118 |     height: 180px;
119 |     z-index: 8;
120 | }
121 | 
122 | .circle::before{
123 |     content: '';
124 |     position: absolute;
125 |     top: -8px;
126 |     width: 15px;
127 |     height: 15px;
128 |     border-radius: 50%;
129 |     background: var(--clr);
130 |     box-shadow: 0 0 20px var(--clr),
131 |     0 0 60px var(--clr);
132 | }
133 | 
134 | /* Digital Clock */
135 | #time{
136 |     margin-bottom: 40px;
137 |     display: flex;
138 |     padding: 10px 20px;
139 |     font-size: 2em;
140 |     font-weight: 600;
141 |     border: 2px solid rgba(0,0,0,0.5);
142 |     border-radius: 40px;
143 |     box-shadow: 5px 5px 10px rgba(0,0,0,0.5),
144 |     inset 5px 5px 20px rgba(255,255,255,0.2),
145 |     inset -5px -5px 15px rgba(0,0,0,0.75);
146 | }
147 | 
148 | #time div{
149 |     position: relative;
150 |     width: 60px;
151 |     text-align: center;
152 |     font-weight: 500;
153 |     color: var(--clr);
154 | }
155 | 
156 | #time div:nth-child(1)::after,
157 | #time div:nth-child(2)::after{
158 |     content: ':';
159 |     position: absolute;
160 |     right: -4px;
161 | }
162 | 
163 | #time div:last-child{
164 |     font-size: 0.5em;
165 |     display: flex;
166 |     justify-content: center;
167 |     align-items: center;
168 |     color: #fff;
169 | }
170 | 
171 | #time div:nth-child(2)::after{
172 |     animation: animate 1s steps(1) infinite;
173 | }
174 | 
175 | @keyframes animate{
176 |     0%{
177 |         opacity: 1;
178 |     }
179 | 
180 |     50%{
181 |         opacity: 0;
182 |     }
183 | }
184 | 
185 | .myName{
186 |     margin-bottom: 15px;
187 |     color: white;
188 |     font-weight: 100;
189 | }


--------------------------------------------------------------------------------
/Analog-saat/main.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let hr = document.querySelector('#hr');
 3 | let mn = document.querySelector('#mn');
 4 | let sc = document.querySelector('#sc');
 5 | 
 6 | setInterval(() => {
 7 |     let day = new Date();
 8 |     let hh = day.getHours() * 30;
 9 |     let mm = day.getMinutes() * 6;
10 |     let ss = day.getSeconds() * 6;
11 | 
12 |     hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
13 |     mn.style.transform = `rotateZ(${mm}deg)`;
14 |     sc.style.transform = `rotateZ(${ss}deg)`;
15 | 
16 |     // Digital Clock
17 |     let hours = document.getElementById('hours');
18 |     let minutes = document.getElementById('minutes');
19 |     let seconds = document.getElementById('seconds');
20 |     let ampm = document.getElementById('ampm');
21 | 
22 |     let h = new Date().getHours();
23 |     let m = new Date().getMinutes();
24 |     let s = new Date().getSeconds();
25 | 
26 |     let am = h>=12 ? "PM" : "AM";
27 |     // Convert 24hr to 12hr
28 |     if(h>12){
29 |         h = h-12;
30 |     }
31 | 
32 |     // Add zero before single numbers
33 |     h = (h<10) ? "0" + h : h
34 |     m = (m<10) ? "0" + m : m
35 |     s = (s<10) ? "0" + s : s
36 | 
37 |     hours.innerHTML = h;
38 |     minutes.innerHTML = m;
39 |     seconds.innerHTML = s;
40 |     ampm.innerHTML = am;
41 | 
42 | })


--------------------------------------------------------------------------------
/Animasyonlu-loading/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Animasonlu Loading</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <section class="bg"></section>
13 |     <div class="loading-text">0%</div>
14 | 
15 |     <script src='main.js'></script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Animasyonlu-loading/main.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap');
 2 | 
 3 | * {
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   font-family: 'Rubik Moonrocks', cursive;
 9 |   display: flex;
10 |   justify-content: center;
11 |   align-items: center;
12 |   height: 100vh;
13 |   margin: 0;
14 |   overflow: hidden;
15 | }
16 | 
17 | .bg {
18 |   background: no-repeat center/cover
19 |     url('https://wallpaperaccess.com/full/6549944.png');
20 |   position: absolute;
21 |   top: 0;
22 |   left: 0;
23 |   width: 100vw;
24 |   height: 100vh;
25 |   z-index: -1;
26 |   filter: blur(0px);
27 | }
28 | 
29 | .loading-text {
30 |   color: #f5d703;
31 |   font-size: 100px;
32 | }


--------------------------------------------------------------------------------
/Animasyonlu-loading/main.js:
--------------------------------------------------------------------------------
 1 | const loadText = document.querySelector('.loading-text')
 2 | const bg = document.querySelector('.bg')
 3 | 
 4 | let load = 0
 5 | 
 6 | let int = setInterval(bluring, 30)
 7 | 
 8 | function bluring() {
 9 |   load++
10 | 
11 |   if (load > 99) {
12 |     clearInterval(int)
13 |   }
14 |   //console.log(load)
15 | 
16 |   loadText.innerText = `${load}%`
17 |   loadText.style.opacity = scale(load, 0, 100, 1, 0)
18 |   bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
19 | }
20 | 
21 | function scale(number, inMin, inMax, outMin, outMax) {
22 |   return ((number - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin
23 | }


--------------------------------------------------------------------------------
/Animation-landing/app.js:
--------------------------------------------------------------------------------
1 | const nav = document.getElementById('nav')
2 | const toggle = document.getElementById('toggle')
3 | 
4 | toggle.addEventListener('click', () => nav.classList.toggle('active'))
5 | 


--------------------------------------------------------------------------------
/Animation-landing/index.html:
--------------------------------------------------------------------------------
 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 rel="stylesheet" href="style.css" />
 8 |     <title>Proje 14</title>
 9 |   </head>
10 |   <body>
11 |     <nav class="active" id="nav">
12 |       <ul>
13 |         <li><a href="#">Hakkımda</a></li>
14 |         <li><a href="#">Yetenekler</a></li>
15 |         <li><a href="#">Projeler</a></li>
16 |         <li><a href="#"> Deneyim</a></li>
17 |       </ul>
18 |       <button id="toggle" class="icon">
19 |         <div class="line line1"></div>
20 |         <div class="line line2"></div>
21 |       </button>
22 |     </nav>
23 |     <script src="app.js"></script>
24 |   </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/Animation-landing/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');
  2 | 
  3 | :root {
  4 |   --darkGreen-color: #1b4332;
  5 | }
  6 | 
  7 | * {
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: 'Ubuntu', sans-serif;
 13 |   display: flex;
 14 |   justify-content: center;
 15 |   align-items: center;
 16 |   height: 100vh;
 17 |   margin: 0;
 18 |   overflow: hidden;
 19 |   background-image: linear-gradient(
 20 |     to bottom,
 21 |     #b7e4c7 50%,
 22 |     var(--darkGreen-color) 50%
 23 |   );
 24 | }
 25 | 
 26 | nav {
 27 |   background-color: #fff;
 28 |   padding: 20px;
 29 |   width: 80px;
 30 |   display: flex;
 31 |   align-items: center;
 32 |   justify-content: center;
 33 |   border-radius: 5px;
 34 |   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
 35 |   transition: width 0.6s linear;
 36 | }
 37 | 
 38 | nav.active {
 39 |   width: 420px;
 40 | }
 41 | 
 42 | nav ul {
 43 |   display: flex;
 44 |   list-style-type: none;
 45 |   padding: 0;
 46 |   margin: 0;
 47 |   width: 0;
 48 |   transition: width 0.6s linear;
 49 | }
 50 | 
 51 | nav.active ul {
 52 |   width: 100%;
 53 | }
 54 | 
 55 | nav ul li {
 56 |   transform: rotateY(0deg);
 57 |   opacity: 0;
 58 |   transition: transform 0.6s linear, opacity 0.6s linear;
 59 | }
 60 | 
 61 | nav.active ul li {
 62 |   opacity: 1;
 63 |   transform: rotateY(360deg);
 64 | }
 65 | 
 66 | nav ul a {
 67 |   position: relative;
 68 |   color: #333;
 69 |   text-decoration: none;
 70 |   margin: 0 10px;
 71 | }
 72 | 
 73 | .icon {
 74 |   background-color: #fff;
 75 |   border: none;
 76 |   cursor: pointer;
 77 |   padding: 0;
 78 |   position: relative;
 79 |   height: 30px;
 80 |   width: 30px;
 81 | }
 82 | 
 83 | .icon .line {
 84 |   background-color: var(--darkGreen-color);
 85 |   height: 2px;
 86 |   width: 20px;
 87 |   position: absolute;
 88 |   top: 10px;
 89 |   left: 5px;
 90 |   transition: transform 0.6s linear;
 91 | }
 92 | 
 93 | .icon .line2 {
 94 |   top: auto;
 95 |   bottom: 10px;
 96 | }
 97 | 
 98 | nav.active .icon .line1 {
 99 |   transform: rotate(-765deg) translateY(5.5px);
100 | }
101 | 
102 | nav.active .icon .line2 {
103 |   transform: rotate(765deg) translateY(-5.5px);
104 | }
105 | 


--------------------------------------------------------------------------------
/Açılır-kapanır-search/index.html:
--------------------------------------------------------------------------------
 1 |  <!DOCTYPE html>
 2 |  <html>
 3 |  <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Açılır Kapanır Search</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 |  </head>
11 |  <body>
12 | 
13 |     <div class="search">
14 |         <input type="text" class="input" placeholder="Hızlı Arama...">
15 |         <button class="btn">
16 |             <i class="fa-brands fa-searchengin"></i>
17 |         </button>
18 |     </div>
19 | 
20 |     <script src='main.js'></script>
21 |  </body>
22 |  </html>


--------------------------------------------------------------------------------
/Açılır-kapanır-search/main.css:
--------------------------------------------------------------------------------
 1 | 
 2 | * {
 3 |   box-sizing: border-box;
 4 | }
 5 | 
 6 | body {
 7 |   font-family: 'Inter', sans-serif;
 8 |   background-image: linear-gradient(90deg, #c93222, #e57814);
 9 |   display: flex;
10 |   justify-content: center;
11 |   align-items: center;
12 |   height: 100vh;
13 |   margin: 0;
14 |   overflow: hidden;
15 | }
16 | 
17 | .search {
18 |   position: relative;
19 |   height: 50px;
20 | }
21 | 
22 | .search .input {
23 |   font-family: inherit;
24 |   background-color: #fff;
25 |   border: 0;
26 |   font-size: 16px;
27 |   padding: 15px;
28 |   height: 50px;
29 |   width: 50px;
30 |   transition: width 0.3s ease;
31 | }
32 | 
33 | .btn {
34 |   background-color: #fff;
35 |   color: #e52fb6;
36 |   border: none;
37 |   cursor: pointer;
38 |   font-size: 24px;
39 |   position: absolute;
40 |   top: 0;
41 |   left: 0;
42 |   height: 50px;
43 |   width: 50px;
44 |   transition: transform 0.3s ease;
45 | }
46 | 
47 | .input:focus,
48 | .btn:focus {
49 |   outline: none;
50 | }
51 | 
52 | .search.active .input {
53 |   width: 200px;
54 | }
55 | 
56 | .search.active .btn {
57 |   transform: translateX(198px);
58 | }
59 | 


--------------------------------------------------------------------------------
/Açılır-kapanır-search/main.js:
--------------------------------------------------------------------------------
1 | const search = document.querySelector(".search");
2 | const input = document.querySelector(".input");
3 | const btn = document.querySelector(".btn");
4 | 
5 | btn.addEventListener("click", () => {
6 |     search.classList.toggle("active");
7 |     input.focus();
8 | });


--------------------------------------------------------------------------------
/Blur_İmage/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Blur_İmage/1.jpg


--------------------------------------------------------------------------------
/Blur_İmage/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Hidden Search</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |    <section class="background"></section>
13 |    <div class="number">0%</div>
14 | 
15 |    <script src='main.js'></script>
16 | </body>
17 | </html> 


--------------------------------------------------------------------------------
/Blur_İmage/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |    margin: 0;
 3 |    padding: 0;
 4 |    font-family: 'Courier New', Courier, monospace;
 5 | }
 6 | 
 7 | body{
 8 |    overflow: hidden;
 9 | }
10 | 
11 | .background{
12 |    position: absolute;
13 |    background-image: url(1.jpg);
14 |    background-position: center;
15 |    background-repeat: no-repeat;
16 |    background-size: cover;
17 |    height: 100vh;
18 |    width: 100vw;
19 |    z-index: -1;
20 |    filter: blur(50px);
21 | }
22 | 
23 | .number{
24 |    display: flex;
25 |    align-items: center;
26 |    justify-content: center;
27 |    height: 100vh;
28 |    font-size: 100px;
29 |    font-weight: 900;
30 |    color: rgb(0, 255, 140);
31 | }


--------------------------------------------------------------------------------
/Blur_İmage/main.js:
--------------------------------------------------------------------------------
 1 | var background = document.querySelector(".background")
 2 | var number = document.querySelector(".number")
 3 | 
 4 | let blur = 1
 5 | 
 6 | let int = setInterval(backgroundBlur, 30)
 7 | 
 8 | function backgroundBlur(){
 9 |    blur++
10 | 
11 |    if(blur > 99){
12 |       clearInterval(int)
13 |    }
14 | 
15 |    number.innerText = blur + "%"
16 |    background.style.filter = `blur(${50 - (blur/2)}px)`
17 | }
18 | 
19 | backgroundBlur()


--------------------------------------------------------------------------------
/Bolunmus-Acilis-Sayfasi/index.html:
--------------------------------------------------------------------------------
 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 rel="stylesheet" href="main.css" />
 8 |     <title>Split Landing Page</title>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <!--hover-left |hover-right-->
13 |       <div class="split left">
14 |         <h1>Front-End Developer</h1>
15 |         <a href="#" class="btn">Front-End</a>
16 |       </div>
17 | 
18 |       <div class="split right">
19 |         <h1>Back-End Developer</h1>
20 |         <a href="#" class="btn">Back-End</a>
21 |       </div>
22 |     </div>
23 | 
24 |     <script src="main.js"></script>
25 |   </body>
26 | </html>


--------------------------------------------------------------------------------
/Bolunmus-Acilis-Sayfasi/main.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
  2 | 
  3 | :root {
  4 |   --left-bg-color: rgba(245, 59, 223, 0.59);
  5 |   --right-bg-color: rgba(177, 59, 245, 0.59);
  6 |   --left-btn-hover-color: rgba(245, 59, 223, 1);
  7 |   --right-btn-hover-color: rgba(177, 59, 245, 1);
  8 |   --hover-width: 75%;
  9 |   --other-width: 25%;
 10 |   --hover-height: 75%;
 11 |   --speed: 1000ms;
 12 | }
 13 | 
 14 | * {
 15 |   box-sizing: border-box;
 16 | }
 17 | 
 18 | body {
 19 |   font-family: 'Inter', sans-serif;
 20 |   height: 100vh;
 21 |   margin: 0;
 22 |   overflow: hidden;
 23 | }
 24 | 
 25 | .container {
 26 |   position: relative;
 27 |   width: 100%;
 28 |   height: 100%;
 29 |   background-color: #333;
 30 | }
 31 | 
 32 | .split {
 33 |   position: absolute;
 34 |   width: 50%;
 35 |   height: 100%;
 36 |   overflow: hidden;
 37 | }
 38 | 
 39 | .split.left {
 40 |   left: 0;
 41 |   background: no-repeat center/cover
 42 |     url('https://www.optimisthub.com/wp-content/uploads/frontend-nedir.png');
 43 | }
 44 | 
 45 | .split.left::before {
 46 |   content: '';
 47 |   position: absolute;
 48 |   width: 100%;
 49 |   height: 100%;
 50 |   background-color: var(--left-bg-color);
 51 | }
 52 | 
 53 | .split.right {
 54 |   right: 0;
 55 |   background: no-repeat center/cover
 56 |     url('https://i0.wp.com/hocjavascript.net/wp-content/uploads/2021/03/Nen-lam-backend-hay-frontend-khi-moi-ra-truong.jpg?fit=750%2C450&ssl=1');
 57 | }
 58 | 
 59 | .split.right::before {
 60 |   content: '';
 61 |   position: absolute;
 62 |   width: 100%;
 63 |   height: 100%;
 64 |   background-color: var(--right-bg-color);
 65 | }
 66 | 
 67 | h1 {
 68 |   font-size: 3rem;
 69 |   color: #fff;
 70 |   position: absolute;
 71 |   left: 50%;
 72 |   top: 20%;
 73 |   transform: translateX(-50%);
 74 |   text-shadow: 3px 3px 10px rgba(0, 0, 0, 1);
 75 |   white-space: nowrap;
 76 | }
 77 | 
 78 | .btn {
 79 |   position: absolute;
 80 |   left: 50%;
 81 |   top: 50%;
 82 |   transform: translateX(-50%);
 83 |   text-decoration: none;
 84 |   color: #fff;
 85 |   border: #fff solid 3px;
 86 |   background-color: transparent;
 87 |   font-size: 1.5rem;
 88 |   font-weight: bold;
 89 |   width: 15rem;
 90 |   padding: 1.5rem;
 91 |   /*text-align: center;*/
 92 |   display: flex;
 93 |   align-items: center;
 94 |   justify-content: center;
 95 |   border-radius: 40px;
 96 |   box-shadow: 3px 3px 10px rgba(0, 0, 0, 1);
 97 |   text-transform: uppercase;
 98 | }
 99 | 
100 | .split.left .btn:hover {
101 |   background-color: var(--left-btn-hover-color);
102 |   border-color: transparent;
103 | }
104 | 
105 | .split.right .btn:hover {
106 |   background-color: var(--right-btn-hover-color);
107 |   border-color: transparent;
108 | }
109 | 
110 | .hover-left .left {
111 |   width: var(--hover-width);
112 | }
113 | 
114 | .hover-left .right {
115 |   width: var(--other-width);
116 | }
117 | 
118 | .hover-right .right {
119 |   width: var(--hover-width);
120 | }
121 | 
122 | .hover-right .left {
123 |   width: var(--other-width);
124 | }
125 | 
126 | .split.right,
127 | .split.left,
128 | .split.right::before,
129 | .split.left::before {
130 |   transition: all var(--speed) ease-in-out;
131 | }
132 | 
133 | @media (max-width: 800px) {
134 |   h1 {
135 |     font-size: 1.5rem;
136 |     top: 40%;
137 |   }
138 | 
139 |   .btn {
140 |     padding: 1.2rem;
141 |     width: 12rem;
142 |     font-size: 1.2rem;
143 |   }
144 | }


--------------------------------------------------------------------------------
/Bolunmus-Acilis-Sayfasi/main.js:
--------------------------------------------------------------------------------
 1 | const left = document.querySelector(".left");
 2 | const right = document.querySelector(".right");
 3 | const container = document.querySelector(".container");
 4 | 
 5 | left.addEventListener("mouseenter", () => {
 6 |     container.classList.add("hover-left")
 7 | })
 8 | 
 9 | left.addEventListener("mouseleave", () => {
10 |     container.classList.remove("hover-left")
11 | })
12 | 
13 | right.addEventListener("mouseenter", () => {
14 |     container.classList.add("hover-right")
15 | })
16 | 
17 | right.addEventListener("mouseleave", () => {
18 |     container.classList.remove("hover-right")
19 | })


--------------------------------------------------------------------------------
/Button_Effect/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Button Effect</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <button class="ripple">
13 |         Tıkla
14 |         <!-- <span class="circle"></span> -->
15 |     </button>
16 | 
17 |     <script src='main.js'></script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Button_Effect/main.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     font-family: sans-serif;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | button{
11 |     background-color: rebeccapurple;
12 |     font-family: sans-serif;
13 |     border: none;
14 |     border-radius: 1rem;
15 |     padding: 2rem 4rem;
16 |     font-size: 1.5rem;
17 |     font-weight: bold;
18 |     color: white;
19 |     letter-spacing: 2px;
20 |     cursor: pointer;
21 |     position: relative;
22 |     overflow: hidden;
23 |     z-index: 1;
24 | }
25 | 
26 | .button:focus{
27 |     outline: none;
28 | }
29 | 
30 | .circle{
31 |     position: absolute;
32 |     width: 10rem;
33 |     height: 10rem;
34 |     background-color: white;
35 |     left: 6rem;
36 |     border-radius: 50%;
37 |     transform: translate(-50%, -50%) scale(0);
38 |     animation: scale 0.5s ease-out;
39 | }
40 | 
41 | @keyframes scale{
42 |     to{
43 |         transform: translate(-50%, -50%) scale(3);
44 |         opacity: 0;
45 |     }
46 | }


--------------------------------------------------------------------------------
/Button_Effect/main.js:
--------------------------------------------------------------------------------
 1 | const button = document.querySelector(".ripple")
 2 | 
 3 | button.addEventListener("click", (e) => {
 4 |   const clientX = e.clientX
 5 |   const clientY = e.clientY
 6 | 
 7 |   const buttonTop = e.target.offsetTop
 8 |   const buttonLeft = e.target.offsetLeft
 9 | 
10 |   const xInside = clientX - buttonLeft
11 |   const yInside = clientY - buttonTop
12 | 
13 |   const circle = document.createElement("span")
14 |   circle.classList.add("circle")
15 |   circle.style.top = yInside + "px"
16 |   circle.style.left = xInside +"px"
17 | 
18 |   button.appendChild(circle)
19 | 
20 |   setTimeout(() => circle.remove(), 900)
21 | })


--------------------------------------------------------------------------------
/Calculator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Calculator</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |   <div class="container">
13 |     <div class="calculator">
14 |       <input id="userInput" placeholder="0">
15 |       <br>
16 |       <button class="btn" onclick="press(1)">1</button>
17 |       <button class="btn" onclick="press(2)">2</button>
18 |       <button class="btn" onclick="press(3)">3</button>
19 |       <button style="background-color: #ffb84d;" class="btn" onclick="press('+')">+</button>
20 |       <br>
21 |       <button class="btn" onclick="press(4)">4</button>
22 |       <button class="btn" onclick="press(5)">5</button>
23 |       <button class="btn" onclick="press(6)">6</button>
24 |       <button style="background-color: #ffcc80;" class="btn" onclick="press('-')">-</button>
25 |       <br>
26 |       <button class="btn" onclick="press(7)">7</button>
27 |       <button class="btn" onclick="press(8)">8</button>
28 |       <button class="btn" onclick="press(9)">9</button>
29 |       <button style="background-color: #ffe0b3;" class="btn" onclick="press('*')">*</button>
30 |       <br>
31 |       <button class="btn" onclick="press('.')">.</button>
32 |       <button class="btn" onclick="press(0)">0</button>
33 |       <button class="btn" onclick="erase()">C</button>
34 |       <button style="background-color: #fff5e6;" class="btn" onclick="press('/')">/</button>
35 |       <br>
36 |       <button class="btnEqual" onclick="equal()">=</button>
37 |     </div>
38 |   </div>
39 | 
40 |    <script src='main.js'></script>
41 | </body>
42 | </html> 


--------------------------------------------------------------------------------
/Calculator/main.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |   overflow: hidden;
 3 |   background-color: #f4f4ed;
 4 | }
 5 | 
 6 | .container{
 7 |   width: 95%;
 8 |   height: 100vh;
 9 |   margin: auto;
10 |   display: flex;
11 |   justify-content: center;
12 |   align-items: center;
13 | }
14 | 
15 | .calculator{
16 |   width: 370px;
17 |   margin: auto;
18 |   border-radius: 2px;
19 |   background-color: #f2f2f2;
20 |   padding: 15px 15px 20px 20px;
21 |   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
22 | }
23 | 
24 | #userInput{
25 |   box-sizing: border-box;
26 |   width: 100%;
27 |   padding: 40px 5px;
28 |   background-color: whitesmoke;
29 |   text-align: right;
30 |   direction: ltr;
31 |   outline: none;
32 |   border: none;
33 | }
34 | 
35 | .btn{
36 |   width: 24%;
37 |   height: 45px;
38 |   border-radius: 1px;
39 |   border: none;
40 |   outline: none;
41 |   margin-top: 3px;
42 |   background-color: whitesmoke;
43 |   cursor: pointer;
44 | }
45 | 
46 | .btnEqual{
47 |   width: 99.2%;
48 |   height: 45px;
49 |   border-radius: 1px;
50 |   border: none;
51 |   outline: none;
52 |   margin-top: 3px;
53 |   background-color: whitesmoke;
54 |   cursor: pointer;
55 | }
56 | 
57 | .btn:hover, .btnEqual:hover{
58 |   background-color: rgba(128, 128, 128, 0.1);
59 | }
60 | 
61 | @media(max-width:480px){
62 |   .btn{
63 |     width: 23.4%;
64 |   }
65 | }
66 | 
67 | @media(max-width:320px){
68 |   .btn{
69 |     width: 23%;
70 |   }
71 | }


--------------------------------------------------------------------------------
/Calculator/main.js:
--------------------------------------------------------------------------------
 1 | const userInput = document.getElementById("userInput");
 2 | 
 3 | var expression = "";
 4 | 
 5 | function press(num){
 6 |   expression += num;
 7 |   userInput.value = expression;
 8 | }
 9 | 
10 | function equal(){
11 |   userInput.value = eval(expression);
12 |   expression = "";
13 | }
14 | 
15 | function erase(){
16 |   expression = "";
17 |   userInput.value = expression;
18 | }


--------------------------------------------------------------------------------
/Dalga-Animasyonu/index.html:
--------------------------------------------------------------------------------
 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 rel="stylesheet" href="main.css" />
 8 |     <title>Document</title>
 9 |   </head>
10 |   <body>
11 |     <div class="container">
12 |       <h1>EBA Hesabı ile Giriş Yap</h1>
13 |       <form>
14 |         <div class="form-control">
15 |           <input type="email" required />
16 |           <label>Eposta</label>
17 |           <!-- <label>
18 |               <span style="transition-delay: 0ms">E</span>
19 |               <span style="transition-delay: 50ms">p</span>
20 |               <span style="transition-delay: 100ms">o</span>
21 |               <span style="transition-delay: 150ms">s</span>
22 |               <span style="transition-delay: 200ms">t</span>
23 |               <span style="transition-delay: 250ms">a</span>
24 |             </label> -->
25 |         </div>
26 |         <div class="form-control">
27 |           <input type="password" required />
28 |           <label for="">Şifre</label>
29 |         </div>
30 |         <button class="btn">Giriş</button>
31 |         <p class="text">Hesabın mı yok? <a href="#">EBA Hesabı Oluştur</a></p>
32 |       </form>
33 |     </div>
34 |     <script src="main.js"></script>
35 |   </body>
36 | </html>


--------------------------------------------------------------------------------
/Dalga-Animasyonu/main.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
  2 | 
  3 | :root {
  4 |   --red-color: #d22731;
  5 | }
  6 | 
  7 | * {
  8 |   box-sizing: border-box;
  9 | }
 10 | 
 11 | body {
 12 |   font-family: 'Inter', sans-serif;
 13 |   background-color: #e8e8e8;
 14 |   display: flex;
 15 |   justify-content: center;
 16 |   align-items: center;
 17 |   height: 100vh;
 18 |   margin: 0;
 19 |   overflow: hidden;
 20 | }
 21 | 
 22 | .container {
 23 |   background-color: #fff;
 24 |   padding: 20px 40px;
 25 |   border-radius: 10px;
 26 |   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
 27 | }
 28 | 
 29 | .container h1 {
 30 |   color: var(--red-color);
 31 |   text-align: center;
 32 |   margin-bottom: 30px;
 33 | }
 34 | 
 35 | .container a {
 36 |   text-decoration: none;
 37 |   color: #7bbcd8;
 38 | }
 39 | 
 40 | .form-control {
 41 |   position: relative;
 42 |   margin: 20px 0 40px;
 43 |   width: 300px;
 44 | }
 45 | 
 46 | .form-control input {
 47 |   border: 0;
 48 |   border-bottom: 2px solid #e8e8e8;
 49 |   display: block;
 50 |   width: 100%;
 51 |   padding: 15px;
 52 |   color: #333;
 53 | }
 54 | 
 55 | .form-control input:focus,
 56 | .form-control input:valid {
 57 |   outline: none;
 58 |   border-bottom-color: #999;
 59 |   font-size: 16px;
 60 | }
 61 | 
 62 | .btn {
 63 |   cursor: pointer;
 64 |   display: inline-block;
 65 |   width: 100%;
 66 |   background-color: var(--red-color);
 67 |   padding: 15px;
 68 |   font-family: inherit;
 69 |   font-size: 16px;
 70 |   border: none;
 71 |   border-radius: 25px;
 72 |   color: #fff;
 73 | }
 74 | 
 75 | .btn:focus {
 76 |   outline: none;
 77 | }
 78 | 
 79 | .btn:active {
 80 |   transform: scale(0.98);
 81 | }
 82 | 
 83 | .text {
 84 |   font-size: 13px;
 85 |   margin-top: 30px;
 86 | }
 87 | 
 88 | .text a:hover {
 89 |   text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
 90 | }
 91 | 
 92 | .form-control label {
 93 |   position: absolute;
 94 |   top: 15px;
 95 |   left: 0;
 96 | }
 97 | 
 98 | .form-control label span {
 99 |   display: inline-block;
100 |   font-size: 18px;
101 |   min-width: 5px;
102 |   transition: 0.3s cubic-bezier(0.7, -0.6, 0.3, 1.55);
103 | }
104 | 
105 | .form-control input:focus + label span,
106 | .form-control input:valid + label span {
107 |   color: #999;
108 |   transform: translateY(-30px);
109 | }
110 | 


--------------------------------------------------------------------------------
/Dalga-Animasyonu/main.js:
--------------------------------------------------------------------------------
 1 | const labels = document.querySelectorAll('.form-control label')
 2 | 
 3 | labels.forEach((label) => {
 4 |   label.innerHTML = label.innerText
 5 |     .split('')
 6 |     .map(
 7 |       (letter, index) =>
 8 |         `<span style="transition-delay:${index * 50}ms">${letter}</span>`
 9 |     )
10 |     .join('')
11 | })


--------------------------------------------------------------------------------
/Dark-Light-Theme/app.js:
--------------------------------------------------------------------------------
1 | 
2 | const darkModeToggler = document.getElementById("dark-mode-toggler");
3 | 
4 | darkModeToggler.addEventListener("change", () => {
5 |     document.body.classList.toggle("dark-mode");
6 | })


--------------------------------------------------------------------------------
/Dark-Light-Theme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |   <title>Slider</title>
 7 |   <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |   <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
10 | </head>
11 | <body>
12 | 
13 |   <div class="toggler-wrap">
14 |     <input type="checkbox" class="checkbox" id="dark-mode-toggler">
15 |     <label for="dark-mode-toggler" class="label">
16 |       <i class="fas fa-lightbulb"></i>
17 |       <i class="far fa-lightbulb"></i>
18 |       <div class="ball"></div>
19 |     </label>
20 |   </div>
21 | 
22 |   <div class="wrap">
23 |     <h2>Lorem İpsum</h2>
24 |     <p>
25 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur molestias magni sit illo culpa ex provident voluptatibus aliquid, exercitationem repellat modi cumque, iste veritatis laborum recusandae enim maiores consectetur ipsam?
26 |     </p>
27 |   </div>
28 | 
29 | <script src='app.js'></script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/Dark-Light-Theme/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | :root{
 8 |     --light-font-color: #222;
 9 |     --light-bg-color: #eee;
10 |     --light-fg-color: #fff;
11 | 
12 |     --dark-font-color: #eee;
13 |     --dark-bg-color: #181818;
14 |     --dark-fg-color: #23242d;
15 | 
16 |     --font-color: var(--light-font-color);
17 |     --backround: var(--light-bg-color);
18 |     --foreground: var(--light-fg-color);
19 | }
20 | 
21 | .dark-mode{
22 |     --font-color: var(--dark-font-color);
23 |     --backround: var(--dark-bg-color);
24 |     --foreground: var(--dark-fg-color);
25 | }
26 | 
27 | body{
28 |     font-family: sans-serif;
29 |     background-color: var(--backround);
30 | }
31 | 
32 | .toggler-wrap{
33 |     display: flex;
34 |     justify-content: flex-end;
35 |     padding: 20px;
36 | }
37 | 
38 | .checkbox{
39 |     display: none;
40 | }
41 | 
42 | .label{
43 |     background-color: var(--foreground);
44 |     width: 50px;
45 |     height: 24px;
46 |     border-radius: 12px;
47 |     cursor: pointer;
48 |     display: flex;
49 |     align-items: center;
50 |     justify-content: space-between;
51 |     padding: 5px;
52 |     position: relative;
53 |     transform: scale(1.3);
54 | }
55 | 
56 | .ball{
57 |     position: absolute;
58 |     width: 20px;
59 |     height: 20px;
60 |     top: 2px;
61 |     left: 2px;
62 |     border-radius: 10px;
63 |     background-color: var(--font-color);
64 |     transform: translateX(0px);
65 |     transition: transform .2s linear;
66 | }
67 | 
68 | .checkbox:checked + .label .ball{
69 |     transform: translateX(24px);
70 | }
71 | 
72 | i{
73 |     color: var(--font-color);
74 | }
75 | 
76 | .wrap{
77 |     width: 400px;
78 |     padding: 20px;
79 |     margin: 200px auto;
80 |     background-color: var(--foreground);
81 |     color: var(--font-color);
82 |     border-radius: 5px;
83 | }
84 | 
85 | p{
86 |     padding: 10px 5px;
87 | }


--------------------------------------------------------------------------------
/Feedback/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Site</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
11 |       integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
12 |       crossorigin="anonymous"
13 |       referrerpolicy="no-referrer"
14 |     />
15 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
16 | </head>
17 | <body>
18 | 
19 |     <div id="panel" class="panel-container">
20 |       <strong
21 |         >Geri bildiriminiz bizim için önemli lütfen memnuniyet durumunuzu
22 |         bizimle paylaşın.</strong
23 |       >
24 |       <div class="ratings-container">
25 |         <div class="rating">
26 |           <p>😿</p>
27 |           <small>Mutsuz</small>
28 |         </div>
29 | 
30 |         <div class="rating">
31 |           <p>🙀</p>
32 |           <small>Yorumsuz</small>
33 |         </div>
34 | 
35 |         <div class="rating">
36 |           <p>😻</p>
37 |           <small>Memnun</small>
38 |         </div>
39 |       </div>
40 |       <button class="btn" id="send">Değerlendir</button>
41 |     </div>
42 | 
43 |     <script src='main.js'></script>
44 | </body>
45 | </html>


--------------------------------------------------------------------------------
/Feedback/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |   font-family: sans-serif;
 7 |   display: flex;
 8 |   justify-content: center;
 9 |   align-items: center;
10 |   height: 100vh;
11 |   margin: 0;
12 |   overflow: hidden;
13 |   background-color: #f1f1f1;
14 | }
15 | 
16 | .panel-container{
17 |   background-color: white;
18 |   box-shadow: 0 6px 12px -2px rgba(50, 50, 95, 0.25);
19 |   font-size: 90%;
20 |   display: flex;
21 |   flex-direction: column;
22 |   align-items: center;
23 |   justify-content: center;
24 |   text-align: center;
25 |   padding: 2rem;
26 |   max-width: 500px;
27 | }
28 | 
29 | .panel-container strong{
30 |   line-height: 2rem;
31 | }
32 | 
33 | .ratings-container{
34 |   display: flex;
35 |   margin: 1rem 0;
36 | }
37 | 
38 | .rating{
39 |   cursor: pointer;
40 |   margin: 1rem;
41 | }
42 | 
43 | .rating p{
44 |   margin: 0;
45 |   font-size: 6rem;
46 |   transition: transform 0.5s ease;
47 | }
48 | 
49 | .rating small{
50 |   font-weight: bold;
51 |   font-size: 17px;
52 |   color: #555;
53 |   transition: color 0.5s ease;
54 | }
55 | 
56 | .rating:hover small, .rating.active small{
57 |   color: #ff0000;
58 | }
59 | 
60 | .rating:hover p, .rating.active p{
61 |   transform: scale(1.1);
62 | }
63 | 
64 | .btn{
65 |   background-color: tomato;
66 |   border: 0;
67 |   color: white;
68 |   font-weight: bold;
69 |   font-family: sans-serif;
70 |   border-radius: 2rem;
71 |   padding: 1rem 2rem;
72 |   font-size: 120%;
73 |   letter-spacing: 2px;
74 |   cursor: pointer;
75 |   transition: transform 0.2s ease;
76 | }
77 | 
78 | .btn:active{
79 |   transform: scale(0.95);
80 | }
81 | 
82 | .btn:focus{
83 |   outline: 0;
84 | }
85 | 
86 | .fa-heart{
87 |   font-size: 3rem;
88 |   color: #ff0000;
89 |   margin-bottom: 1rem;
90 | }


--------------------------------------------------------------------------------
/Feedback/main.js:
--------------------------------------------------------------------------------
 1 | const ratings = document.querySelectorAll(".rating")
 2 | const btn = document.getElementById("send")
 3 | const panel = document.querySelector(".panel-container")
 4 | let selectedRating = "Geri bildirim seçmediniz!"
 5 | 
 6 | ratings.forEach((rating) => {
 7 |   rating.addEventListener("click", (e) => {
 8 |     if(e.target.parentNode.classList.contains("rating")) {
 9 |       removeActive()
10 |       e.target.parentNode.classList.add("active")
11 |       selectedRating = e.target.nextElementSibling.innerHTML
12 |     }
13 |   })
14 | })
15 | 
16 | function removeActive(){
17 |   for(let i = 0; i<ratings.length; i++){
18 |     ratings[i].classList.remove("active")
19 |   }
20 | }
21 | 
22 | btn.addEventListener('click', () => {
23 |   panel.innerHTML = `
24 | 
25 |     <i class="fas fa-heart"></i>
26 |     <strong> Geri bildiriminiz bizim için çok değerli. </strong>
27 |     <br>
28 |     <strong> Geri Bildiriminiz: ${selectedRating} </strong>
29 |     <p> Geri bildiriminizi kendimizi geliştirmek için kullanacağız. </p> 
30 | 
31 |   `
32 | })


--------------------------------------------------------------------------------
/Genisleyen-Kartlar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Genisleyen Kartlar</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <div class="panel active" style="background-image: url('https://cdn.yemek.com/mnresize/940/940/uploads/2015/09/humus-guncelleme-sunum-2.jpg');">
14 |             <h3>Humus</h3>
15 |         </div>
16 |         <div class="panel" style="background-image: url('https://cdn.ye-mek.net/App_UI/Img/out/650/2016/07/babagannus-resimli-yemek-tarifi(11).jpg');">
17 |             <h3>Babagannus</h3>
18 |         </div>
19 |         <div class="panel" style="background-image: url('https://img-s1.onedio.com/id-5419792dbd91753f1174225f/rev-0/w-635/f-jpg/s-06102007b3baadc508c923574e6d92857ab0e203.jpg')">
20 |             <h3>Tarator</h3>
21 |         </div>
22 |         <div class="panel" style="background-image: url('https://cdn.yemek.com/mnresize/940/940/uploads/2014/11/muhammara-one-cikan.jpg'); ">
23 |             <h3>Muhammara</h3>
24 |         </div>
25 |         <div class="panel" style="background-image: url('https://img-s2.onedio.com/id-54251fd54a693a2259536a57/rev-0/w-635/f-jpg/s-0149c4cedf6d8cb928c87a4e73d439cc2a9a4b49.jpg')">
26 |             <h3>Tarama</h3>
27 |         </div>
28 |     </div>
29 | 
30 |     <script src='main.js'></script>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/Genisleyen-Kartlar/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |     font-family: sans-serif;
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     margin: 0;
12 |     overflow: hidden;
13 | }
14 | 
15 | .container{
16 |     display: flex;
17 |     width: 90vw;
18 | }
19 | 
20 | .panel{
21 |     background-size: auto 100%;
22 |     background-position: center;
23 |     background-repeat: no-repeat;
24 |     height: 80vh;
25 |     border-radius: 50px;
26 |     cursor: pointer;
27 |     flex: 0.5;
28 |     margin: 10px;
29 |     position: relative;
30 |     transition: flex 0.7s ease-in;
31 | }
32 | 
33 | .panel h3{
34 |     font-size: 24px;
35 |     position: absolute;
36 |     bottom: 20px;
37 |     left: 50%;
38 |     margin: 0px;
39 |     opacity: 0;
40 | }
41 | 
42 | .panel.active{
43 |     flex: 5;
44 | }
45 | 
46 | .panel.active h3 {
47 |     text-decoration: underline;
48 |     opacity: 1;
49 |     transition: opacity 0.3s ease-in 0.4s;
50 | }
51 | 
52 | @media (max-width: 600px){
53 |     .container{
54 |         width: 100vw;
55 |     }
56 | 
57 |     .panel:nth-of-type(4), .panel:nth-of-type(5){
58 |         display: none;
59 |     }
60 | }


--------------------------------------------------------------------------------
/Genisleyen-Kartlar/main.js:
--------------------------------------------------------------------------------
 1 | const panels = document.querySelectorAll(".panel");
 2 | 
 3 | panels.forEach(panel => {
 4 |     panel.addEventListener("click", () => {
 5 |         removeActive();
 6 |         panel.classList.add("active");
 7 |     });
 8 | });
 9 | 
10 | function removeActive() {
11 |     panels.forEach(panel => {
12 |         panel.classList.remove("active");
13 |     });
14 | };


--------------------------------------------------------------------------------
/Geri_Sayım/app.js:
--------------------------------------------------------------------------------
 1 | const countDate = new Date("Jan 1, 2024 00:00:00").getTime();
 2 | 
 3 | function newYear(){
 4 |     const now = new Date().getTime();
 5 |     let gap = countDate - now;
 6 | 
 7 |     let second = 1000;
 8 |     let minute = second * 60;
 9 |     let hour = minute * 60;
10 |     let day = hour * 24;
11 | 
12 |     let d = Math.floor(gap / (day));
13 |     let h = Math.floor((gap % (day)) / (hour));
14 |     let m = Math.floor((gap % (hour)) / (minute));
15 |     let s = Math.floor((gap % (minute)) / (second));
16 | 
17 |     document.getElementById("day").innerText = d;
18 |     document.getElementById("hour").innerText = h;
19 |     document.getElementById("minute").innerText = m;
20 |     document.getElementById("second").innerText = s;
21 | }
22 | 
23 | setInterval(function(){
24 |     newYear()
25 | },1000)


--------------------------------------------------------------------------------
/Geri_Sayım/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |   <title>Geri Sayım</title>
 7 |   <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |   <style media="screen">
 9 |     .countdown{
10 |       display: flex;
11 |       justify-content: space-between;
12 |       max-width: 400px;
13 |       margin: 50px auto;
14 |     }
15 |     .countdown div{
16 |       font-size: 50px;
17 |     }
18 |   </style>
19 | </head>
20 | <body>
21 | 
22 |   <div class="countdown">
23 |     <div id="day">00</div>
24 |     <div id="hour">00</div>
25 |     <div id="minute">00</div>
26 |     <div id="second">00</div>
27 |   </div>
28 | 
29 | <script src='app.js'></script>
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/Github-Profil-card/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Github</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 | </head>
11 | <body>
12 | 
13 |    <form id="form" class="user-form">
14 |       <input
15 |         type="text"
16 |         id="search"
17 |         placeholder="GitHub Kullanıcısı"
18 |         autocomplete="off"
19 |       />
20 |       <button type="submit">
21 |         <i class="fa-solid fa-magnifying-glass"></i>
22 |       </button>
23 |     </form>
24 | 
25 |     <main id="main">
26 |       <!-- <div class="card">
27 |         <img
28 |           class="user-image"
29 |           src="https://avatars.githubusercontent.com/u/96288230?v=4"
30 |           alt="User Image"
31 |         />
32 | 
33 |         <div class="user-info">
34 |           <div class="user-name">
35 |             <h2>TUĞRUL ARABACI</h2>
36 |             <small>@rbctugrul</small>
37 |           </div>
38 |         </div>
39 | 
40 |         <p>
41 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit
42 |           accusamus fuga dolor facilis quod quam quas aperiam, corrupti deserunt
43 |           at odio alias, repudiandae doloremque, voluptatibus repellendus neque
44 |           perspiciatis laudantium rerum.
45 |         </p>
46 | 
47 |         <ul>
48 |           <li>
49 |             <i class="fa-solid fa-user-group"></i> 311
50 |             <strong>Followers</strong>
51 |           </li>
52 |           <li>2 <strong>Following</strong></li>
53 |           <li>
54 |             <i class="fa-solid fa-bookmark"></i> 21 <strong>Repository</strong>
55 |           </li>
56 |         </ul>
57 | 
58 |         <div class="repos" id="repos">
59 |           <a href="#"> <i class="fa-solid fa-book-bookmark"></i> Repo 1 </a>
60 |           <a href="#"> <i class="fa-solid fa-book-bookmark"></i> Repo 1 </a>
61 |           <a href="#"> <i class="fa-solid fa-book-bookmark"></i> Repo 1 </a>
62 |         </div>
63 |       </div> -->
64 |     </main>
65 | 
66 |    <!-- Script Axios -->
67 |    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.js" integrity="sha512-LUKzDoJKOLqnxGWWIBM4lzRBlxcva2ZTztO8bTcWPmDSpkErWx0bSP4pdsjNH8kiHAUPaT06UXcb+vOEZH+HpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
68 |    <script src='main.js'></script>
69 | </body>
70 | </html>


--------------------------------------------------------------------------------
/Github-Profil-card/main.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Albert+Sans&display=swap');
  2 | 
  3 | :root {
  4 |   --main-color: #0d1117;
  5 |   --assistant-color: #161b22;
  6 |   --input-font-color: #c2c3c5;
  7 |   --border-color: #30363d;
  8 | }
  9 | 
 10 | * {
 11 |   margin: 0;
 12 |   padding: 0;
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | body {
 17 |   font-family: 'Albert Sans', sans-serif;
 18 |   display: flex;
 19 |   flex-direction: column;
 20 |   justify-content: center;
 21 |   align-items: center;
 22 |   margin-top: 2rem;
 23 |   background-color: var(--main-color);
 24 | }
 25 | 
 26 | .user-form {
 27 |   background-color: var(--assistant-color);
 28 |   width: 75%;
 29 |   display: flex;
 30 |   align-items: center;
 31 |   justify-content: center;
 32 |   padding: 1rem;
 33 |   border-radius: 0.5rem;
 34 |   margin-bottom: 1rem;
 35 |   position: relative;
 36 | }
 37 | 
 38 | .user-form input {
 39 |   border: 1px solid var(--border-color);
 40 |   background-color: var(--main-color);
 41 |   padding: 0.5rem 1rem;
 42 |   font-size: 16px;
 43 |   border-radius: 0.3rem;
 44 |   color: #fff;
 45 |   font-family: inherit;
 46 |   width: 100%;
 47 | }
 48 | 
 49 | .user-form input:focus {
 50 |   outline: none;
 51 | }
 52 | 
 53 | .user-form input::placeholder {
 54 |   color: var(--input-font-color);
 55 | }
 56 | 
 57 | .user-form button {
 58 |   position: absolute;
 59 |   right: 1.5rem;
 60 |   font-size: 14px;
 61 |   border: 1px solid var(--border-color);
 62 |   border-radius: 0.3rem;
 63 |   background-color: var(--main-color);
 64 |   color: #fff;
 65 |   padding: 5px;
 66 |   cursor: pointer;
 67 | }
 68 | 
 69 | main {
 70 |   width: 350px;
 71 |   margin: 1rem 0;
 72 | }
 73 | 
 74 | .card {
 75 |   border: 3px solid var(--border-color);
 76 |   padding: 1rem;
 77 |   margin: 1rem;
 78 |   display: flex;
 79 |   flex-wrap: wrap;
 80 |   flex-direction: column;
 81 |   text-align: center;
 82 |   justify-content: center;
 83 |   align-items: center;
 84 |   background-color: var(--assistant-color);
 85 |   box-shadow: 6px 10px 6px rgba(0, 0, 0, 0.2);
 86 |   border-radius: 1rem;
 87 | }
 88 | 
 89 | .user-image {
 90 |   width: 150px;
 91 |   border-radius: 50%;
 92 |   border: 10px solid var(--main-color);
 93 | }
 94 | 
 95 | .user-info {
 96 |   padding: 1rem;
 97 | }
 98 | 
 99 | .user-name {
100 |   border-bottom: 1px solid var(--border-color);
101 |   line-height: 200%;
102 | }
103 | 
104 | h2 {
105 |   color: #fff;
106 |   letter-spacing: 5px;
107 | }
108 | 
109 | small {
110 |   font-weight: bold;
111 |   color: var(--input-font-color);
112 |   letter-spacing: 1.5px;
113 | }
114 | 
115 | p {
116 |   color: #eee;
117 |   text-align: justify;
118 | }
119 | 
120 | ul {
121 |   padding: 1rem 0;
122 |   display: flex;
123 |   justify-content: space-evenly;
124 | }
125 | 
126 | ul li {
127 |   list-style-type: none;
128 |   background-color: #40454e;
129 |   padding: 0.25rem 0.5rem;
130 |   margin: 0.25rem;
131 |   border-radius: 5px;
132 |   color: #fff;
133 |   box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.2);
134 | }
135 | 
136 | .repos {
137 |   width: 100%;
138 |   display: flex;
139 |   flex-wrap: wrap;
140 |   justify-content: space-evenly;
141 |   align-items: center;
142 |   font-size: 14px;
143 | }
144 | 
145 | .repos a {
146 |   text-decoration: none;
147 |   color: #3696ff;
148 |   border: 1px solid var(--border-color);
149 |   border-radius: 5px;
150 |   letter-spacing: 2px;
151 |   padding: 0.25rem 0.5rem;
152 |   margin: 0.25rem;
153 |   box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
154 | }
155 | 
156 | .repos i {
157 |   color: var(--input-font-color);
158 | }


--------------------------------------------------------------------------------
/Github-Profil-card/main.js:
--------------------------------------------------------------------------------
  1 | const API_URL = 'https://api.github.com/users/'
  2 | 
  3 | const form = document.getElementById('form')
  4 | const search = document.getElementById('search')
  5 | const main = document.getElementById('main')
  6 | 
  7 | async function getUser(username) {
  8 |   try {
  9 |     const { data } = await axios(API_URL + username)
 10 | 
 11 |     //console.log(data)
 12 |     createUserCard(data)
 13 |     getRepos(username)
 14 |   } catch (err) {
 15 |     if (err.response.status == 404) {
 16 |       createErrorCard('Ardığınız kullanıcı bulunamadı :(')
 17 |     }
 18 |   }
 19 | }
 20 | 
 21 | form.addEventListener('submit', (e) => {
 22 |   e.preventDefault()
 23 | 
 24 |   const user = search.value
 25 | 
 26 |   if (user) {
 27 |     getUser(user)
 28 | 
 29 |     search.value = ''
 30 |   }
 31 | })
 32 | 
 33 | function createUserCard(user) {
 34 |   const userName = user.name || user.login
 35 |   const userBio = user.bio ? `<p>${user.bio}</p>` : ''
 36 | 
 37 |   const cardHTML = `
 38 | 
 39 |   <div class="card">
 40 |   <img
 41 |     class="user-image"
 42 |     src="${user.avatar_url}"
 43 |     alt="${user.name}"
 44 |   />
 45 | 
 46 |   <div class="user-info">
 47 |     <div class="user-name">
 48 |       <h2>${userName}</h2>
 49 |       <small>@${user.login}</small>
 50 |     </div>
 51 |   </div>
 52 | 
 53 |   <p>
 54 |     ${userBio}
 55 |   </p>
 56 | 
 57 |   <ul>
 58 |     <li>
 59 |       <i class="fa-solid fa-user-group"></i> ${user.followers}
 60 |       <strong>Followers</strong>
 61 |     </li>
 62 |     <li> ${user.following} <strong>Following</strong></li>
 63 |     <li>
 64 |       <i class="fa-solid fa-bookmark"></i> ${user.public_repos} <strong>Repository</strong>
 65 |     </li>
 66 |   </ul>
 67 | 
 68 |   <div class="repos" id="repos"></div>
 69 | </div>
 70 |   
 71 |   `
 72 | 
 73 |   main.innerHTML = cardHTML
 74 | }
 75 | 
 76 | function createErrorCard(msg) {
 77 |   const cardErrorHTML = `
 78 |   
 79 |   <div class="card">
 80 |   <h2> ${msg} </h2>
 81 |   </div>
 82 | 
 83 |   `
 84 | 
 85 |   main.innerHTML = cardErrorHTML
 86 | }
 87 | 
 88 | async function getRepos(username) {
 89 |   try {
 90 |     const { data } = await axios(API_URL + username + '/repos')
 91 | 
 92 |     addReposToCard(data)
 93 |   } catch (err) {
 94 |     createErrorCard('Repoları çekerken hata oluştu.')
 95 |   }
 96 | }
 97 | 
 98 | function addReposToCard(repos) {
 99 |   const reposEl = document.getElementById('repos')
100 | 
101 |   repos.slice(0, 3).forEach((repo) => {
102 |     const reposLink = document.createElement('a')
103 |     reposLink.href = repo.html_url
104 |     reposLink.target = '_blank'
105 |     reposLink.innerHTML = ` <i class="fa-solid fa-book-bookmark"></i> ${repo.name} `
106 | 
107 |     reposEl.appendChild(reposLink)
108 |   })
109 | }


--------------------------------------------------------------------------------
/Grocery_List/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Grocery List</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 | </head>
11 | <body>
12 | 
13 |   <div class="container">
14 |     <div class="groceries">
15 |       <h1 style="text-align: center;">Grocery List</h1>
16 |       <br>
17 |       <div style="text-align: center;">
18 |         <i id="pencil" class="fas fa-pen-alt"></i><input type="text" id="userInput">
19 |       </div>
20 |       <br>
21 |       <div id="allItems"></div>
22 |     </div>
23 |   </div>
24 |   
25 | 
26 |    <script src='main.js'></script>
27 | </body>
28 | </html> 


--------------------------------------------------------------------------------
/Grocery_List/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |   padding: 0;
 3 |   margin: 0;
 4 | }
 5 | 
 6 | body{
 7 |   font-family: sans-serif;
 8 |   background-color: orange;
 9 | }
10 | 
11 | .container{
12 |   width: 90%;
13 |   margin: auto;
14 |   display: flex;
15 | }
16 | 
17 | .groceries{
18 |   width: 600px;
19 |   min-height: 100vh;
20 |   margin: auto;
21 |   background-color: wheat;
22 |   box-shadow: 10px 10px 24px 0 black;
23 | }
24 | 
25 | .groceries h1{
26 |   font-size: 2.5rem;
27 |   margin-top: 1em;
28 | }
29 | 
30 | .groceries i{
31 |   font-size:2rem;
32 |   color: orange;
33 | }
34 | 
35 | .groceries input{
36 |   background-color: wheat;
37 |   font-family: sans-serif;
38 |   outline: 0;
39 |   border: 0;
40 |   border-bottom: 3px solid black;
41 |   width: 70%;
42 |   font-size: 1.5rem;
43 | }
44 | 
45 | #allItems h2{
46 |   margin-left: 50px;
47 |   margin-right: 10px;
48 |   margin-top: 15px;
49 |   font-size: 2rem;
50 |   cursor: pointer;
51 | }
52 | 
53 | #pencil{
54 |   cursor: pointer;
55 | }
56 | 
57 | @media(max-width:480px){
58 |   .groceries h1{
59 |     font-size: 2rem;
60 |   }
61 |   .groceries i{
62 |     font-size: 1.5rem;
63 |   }
64 |   .groceries input{
65 |     font-size: 1rem;
66 |   }
67 |   #allItem h2{
68 |     margin-left: 25px;
69 |     font-size: 2rem;
70 |   }
71 | }


--------------------------------------------------------------------------------
/Grocery_List/main.js:
--------------------------------------------------------------------------------
 1 | const groceries = document.getElementsByClassName("groceries")[0];
 2 | const pencil = document.getElementById("pencil");
 3 | const allItems = document.getElementById("allItems");
 4 | const userInput = document.getElementById("userInput");
 5 | 
 6 | pencil.addEventListener("click", function() {
 7 |   allItems.innerHTML = "";
 8 | });
 9 | 
10 | userInput.addEventListener("keydown", function(event){
11 |   if(event.key == "Enter"){
12 |     addItem();
13 |   }
14 | });
15 | 
16 | function addItem(){
17 |   var h2 = document.createElement("h2");
18 |   h2.innerHTML = "-" + userInput.value;
19 | 
20 |   h2.addEventListener("click", function(){
21 |     h2.style.textDecoration = "line-through";
22 |   })
23 | 
24 | 
25 |   allItems.insertAdjacentElement("beforeend", h2);
26 | 
27 |   h2.addEventListener("dblclick", ()=> {
28 |     h2.remove()
29 |   })
30 | 
31 |   userInput.value = "";
32 | }


--------------------------------------------------------------------------------
/Hava durumu/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Hava durumu/1.jpg


--------------------------------------------------------------------------------
/Hava durumu/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Page Title</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="app">
13 |         <div class="header">
14 |             <h1>Hava Durumu</h1>
15 |             <input type="text" id="searchBar" placeholder="Sehir giriniz..">
16 |         </div>
17 |         <div class="content">
18 |             <div class="city">Istanbul, TR</div>
19 |             <div class="temp">15°C</div>
20 |             <div class="desc">Gunesli</div>
21 |             <div class="minmax">14°C / 19°C</div>
22 |         </div>
23 |     </div>
24 | 
25 |     <script src='main.js'></script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/Hava durumu/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | 
 7 | body{
 8 |     font-family: sans-serif;
 9 |     color: #fff;
10 |     background-image: url("1.jpg");
11 |     background-position: center;
12 |     background-repeat: no-repeat;
13 |     background-size: cover;
14 |     height: 100vh;
15 | }
16 | 
17 | .app{
18 |     display: flex;
19 |     flex-direction: column;
20 |     align-items: center;
21 |     text-align: center;
22 |     background: rgba(0, 0, 0, .7);
23 |     height: 100vh;
24 | }
25 | 
26 | .header{
27 |     padding: 50px 20px 30px 20px;
28 | }
29 | 
30 | .header h{
31 |     font-size: 50px;
32 |     color: #fbb034;
33 |     text-shadow: 1px 3px rgba(0, 0, 0, .9);
34 | }
35 | 
36 | .header input{
37 |     width: 100%;
38 |     padding: 10px;
39 |     background: transparent;
40 |     border: 0;
41 |     outline: 0;
42 |     border-bottom: 2px solid #fbb034;
43 |     text-align: center;
44 |     font-size: 20px;
45 |     color: #f2f2f2;
46 | }
47 | 
48 | .city{
49 |     font-size: 35px;
50 |     font-weight: 500;
51 |     margin-bottom: 10px;
52 |     text-shadow: 1px 3px rgba(0, 0, 0, .8);
53 | }
54 | 
55 | .temp{
56 |     font-size: 100px;
57 |     font-weight: 700;
58 |     margin-bottom: 15px;
59 |     text-shadow: 1px 5px rgba(0, 0, 0, .1);
60 | }
61 | 
62 | .desc{
63 |     font-size: 25px;
64 |     font-style: italic;
65 |     text-shadow: 1px 3px rgba(0, 0, 0, .8);
66 |     margin-bottom: 10px;
67 | }
68 | 
69 | .minmax{
70 |     font-size: 24px;
71 |     text-shadow: 1px 3px rgba(0, 0, 0, .8);
72 | }


--------------------------------------------------------------------------------
/Hava durumu/main.js:
--------------------------------------------------------------------------------
 1 | const url = "https://api.openweathermap.org/data/2.5/";
 2 | const key = "2aa95feb659b6eab64769e1fc8a072cc";
 3 | 
 4 | const setQuery = (e) =>{
 5 |     if(e.keyCode == "13")
 6 |     getResult(searchBar.value);
 7 | };
 8 | 
 9 | const getResult = (cityName) => {
10 |     let query = `${url}weather?q=${cityName}&appid=${key}&units=metric&lang=tr`;
11 |     fetch(query)
12 |     .then(weather => {
13 |         return weather.json();
14 |     })
15 |     .then(displayResult);
16 | };
17 | 
18 | const displayResult = (result) => {
19 |     let city = document.querySelector(".city");
20 |     city.innerText = `${result.name}, ${result.sys.country}`
21 | 
22 |     let temp = document.querySelector(".temp");
23 |     temp.innerText = `${Math.round(result.main.temp)}°C`;
24 | 
25 |     let desc = document.querySelector(".desc");
26 |     desc.innerText = result.weather[0].description;
27 | 
28 |     let minmax = document.querySelector(".minmax");
29 |     minmax.innerText = `${Math.round(result.main.temp_min)}°C / ${Math.round(result.main.temp_max)}°C`;
30 | }
31 | 
32 | const searchBar = document.getElementById("searchBar");
33 | searchBar.addEventListener("keypress", setQuery);


--------------------------------------------------------------------------------
/Hidden_Search/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Hidden Search</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 | </head>
11 | <body>
12 | 
13 |    <div class="search">
14 |       <input type="search" class="input noactive">
15 |       <button class="btn"><i class="fa-solid fa-magnifying-glass"></i></button>
16 |    </div>
17 | 
18 |    <script src='main.js'></script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Hidden_Search/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |    box-sizing: border-box;
 3 |    font-family: sans-serif;
 4 | }
 5 | 
 6 | body{
 7 |    display: flex;
 8 |    align-items: center;
 9 |    justify-content: center;
10 |    height: 100vh;
11 |    margin: 0;
12 |    overflow: hidden;
13 |    background-image: linear-gradient(rgb(0, 0, 0) , rgb(255,255,255));
14 | }
15 | 
16 | .search{
17 |    display: flex;
18 |    margin: 0;
19 | }
20 | 
21 | .input{
22 |    height: 50px;
23 |    width: 250px;
24 |    margin: 0;
25 |    outline: none;
26 |    border: none;
27 |    font-size: 22px;
28 |    transition: width 0.3s ease;
29 | }
30 | 
31 | .input.noactive{
32 |    width: 20px;
33 |    left: 0;
34 |    top: 0;
35 | }
36 | 
37 | .btn{
38 |    margin: 0;
39 |    border: none;
40 |    background-color: white;
41 |    font-size: 22px;
42 |    cursor: pointer;
43 |    width: 40px;
44 |    height: 50px;
45 | }
46 | 
47 | 


--------------------------------------------------------------------------------
/Hidden_Search/main.js:
--------------------------------------------------------------------------------
1 | const btn = document.querySelector(".btn")
2 | const input = document.querySelector(".input")
3 | 
4 | btn.addEventListener("click", () => {
5 |    input.classList.toggle("noactive")
6 | })


--------------------------------------------------------------------------------
/Hoverboard/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>HoverBoard</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container" id="container">
13 |         <!-- <div class="square"></div> -->
14 |     </div>
15 | 
16 |     <script src='main.js'></script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Hoverboard/main.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     background-color: #333;
 3 |     display: flex;
 4 |     justify-content: center;
 5 |     align-items: center;
 6 |     height: 100vh;
 7 |     margin: 0;
 8 | }
 9 | 
10 | .container{
11 |     display: flex;
12 |     align-items: center;
13 |     justify-content: center;
14 |     flex-wrap: wrap;
15 |     max-width: 25rem;
16 | }
17 | 
18 | .square{
19 |     background-color: #111;
20 |     height: 1rem;
21 |     width: 1rem;
22 |     margin: 2px;
23 |     box-shadow: 0 0 2px #000;
24 |     transition: 3s ease;
25 | }
26 | 
27 | .square:hover{
28 |     transition-duration: 0s;
29 | }


--------------------------------------------------------------------------------
/Hoverboard/main.js:
--------------------------------------------------------------------------------
 1 | const container = document.getElementById('container')
 2 | 
 3 | const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']
 4 | const SQUARES = 500
 5 | 
 6 | for (let i = 0; i < SQUARES; i++) {
 7 |   const square = document.createElement('div')
 8 |   square.classList.add('square')
 9 | 
10 |   square.addEventListener('mouseover', () => setColor(square))
11 |   square.addEventListener('mouseout', () => removeColor(square))
12 | 
13 |   container.appendChild(square)
14 | }
15 | 
16 | function setColor(div) {
17 |   //console.log(div)
18 |   const randomColor = getRandomColor()
19 |   div.style.backgroundColor = randomColor
20 |   div.style.boxShadow = `0 0 2px ${randomColor}, 0 0 10px ${randomColor}`
21 | }
22 | 
23 | function getRandomColor() {
24 |   return colors[Math.floor(Math.random() * colors.length)]
25 | }
26 | 
27 | function removeColor(div) {
28 |   //console.log('remove')
29 |   div.style.backgroundColor = '#111'
30 |   div.style.boxShadow = '0 0 2px #000'
31 | }


--------------------------------------------------------------------------------
/Loading__Animation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |   <title>Loading</title>
 7 |   <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |   <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 |   
12 |   
13 | 
14 |   <script src='main.js'></script>
15 | </body>
16 | </html> 


--------------------------------------------------------------------------------
/Loading__Animation/main.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Loading__Animation/main.css


--------------------------------------------------------------------------------
/Menu/images/item-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-1.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-10.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-10.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-2.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-3.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-4.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-5.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-6.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-7.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-7.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-8.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-8.jpeg


--------------------------------------------------------------------------------
/Menu/images/item-9.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/images/item-9.jpeg


--------------------------------------------------------------------------------
/Menu/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Menu</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 | </head>
11 | <body>
12 | 
13 |   <section class="menu">
14 |     <div class="title">
15 |       <h2>our menu</h2>
16 |       <div class="underline"></div>
17 |     </div>
18 |     <div class="btn-container">
19 |       <button class="filter-btn" type="button" data-id="all">all</button>
20 |       <button class="filter-btn" type="button" data-id="breakfast">breakfast</button>
21 |       <button class="filter-btn" type="button" data-id="lunch">lunch</button>
22 |       <button class="filter-btn" type="button" data-id="shakes">shakes</button>
23 |     </div>
24 |     <div class="section-center">
25 |       <!-- <article class="menu-item">
26 |         <img src="./menu-item.jpeg" class="photo" alt="menu item">
27 |         <div class="item-info">
28 |           <header>
29 |             <h4>buttermilk pancakes</h4>
30 |             <h4 class="prices">15$</h4>
31 |           </header>
32 |           <p class="item-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae fugiat, autem, aliquid illum pariatur cupiditate itaque qui iusto laudantium magnam minima dolores iste architecto at sint, officiis deleniti consectetur fugit.</p>
33 |         </div>
34 |       </article> -->
35 |     </div>
36 |   </section>
37 | 
38 |    <script src='main.js'></script>
39 | </body>
40 | </html> 


--------------------------------------------------------------------------------
/Menu/main.js:
--------------------------------------------------------------------------------
  1 | const menu = [
  2 |    {
  3 |      id: 1,
  4 |      title: "buttermilk pancakes",
  5 |      category: "breakfast",
  6 |      price: 15.99,
  7 |      img: "./images/item-1.jpeg",
  8 |      desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
  9 |    },
 10 |    {
 11 |      id: 2,
 12 |      title: "diner double",
 13 |      category: "lunch",
 14 |      price: 13.99,
 15 |      img: "./images/item-2.jpeg",
 16 |      desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
 17 |    },
 18 |    {
 19 |      id: 3,
 20 |      title: "godzilla milkshake",
 21 |      category: "shakes",
 22 |      price: 6.99,
 23 |      img: "./images/item-3.jpeg",
 24 |      desc: `ombucha chillwave fanny pack 3 wolf moon street art photo booth before they sold out organic viral.`,
 25 |    },
 26 |    {
 27 |      id: 4,
 28 |      title: "country delight",
 29 |      category: "breakfast",
 30 |      price: 20.99,
 31 |      img: "./images/item-4.jpeg",
 32 |      desc: `Shabby chic keffiyeh neutra snackwave pork belly shoreditch. Prism austin mlkshk truffaut, `,
 33 |    },
 34 |    {
 35 |      id: 5,
 36 |      title: "egg attack",
 37 |      category: "lunch",
 38 |      price: 22.99,
 39 |      img: "./images/item-5.jpeg",
 40 |      desc: `franzen vegan pabst bicycle rights kickstarter pinterest meditation farm-to-table 90's pop-up `,
 41 |    },
 42 |    {
 43 |      id: 6,
 44 |      title: "oreo dream",
 45 |      category: "shakes",
 46 |      price: 18.99,
 47 |      img: "./images/item-6.jpeg",
 48 |      desc: `Portland chicharrones ethical edison bulb, palo santo craft beer chia heirloom iPhone everyday`,
 49 |    },
 50 |    {
 51 |      id: 7,
 52 |      title: "bacon overflow",
 53 |      category: "breakfast",
 54 |      price: 8.99,
 55 |      img: "./images/item-7.jpeg",
 56 |      desc: `carry jianbing normcore freegan. Viral single-origin coffee live-edge, pork belly cloud bread iceland put a bird `,
 57 |    },
 58 |    {
 59 |      id: 8,
 60 |      title: "american classic",
 61 |      category: "lunch",
 62 |      price: 12.99,
 63 |      img: "./images/item-8.jpeg",
 64 |      desc: `on it tumblr kickstarter thundercats migas everyday carry squid palo santo leggings. Food truck truffaut  `,
 65 |    },
 66 |    {
 67 |      id: 9,
 68 |      title: "quarantine buddy",
 69 |      category: "shakes",
 70 |      price: 16.99,
 71 |      img: "./images/item-9.jpeg",
 72 |      desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
 73 |    },
 74 |    {
 75 |      id: 10,
 76 |      title: "bison steak",
 77 |      category: "lunch",
 78 |      price: 22.99,
 79 |      img: "./images/item-10.jpeg",
 80 |      desc: `skateboard fam synth authentic semiotics. Live-edge lyft af, edison bulb yuccie crucifix microdosing.`,
 81 |    },
 82 |  ];
 83 | 
 84 |  const sectionCenter = document.querySelector(".section-center");
 85 | 
 86 | const filterBtns = document.querySelectorAll(".filter-btn");
 87 | 
 88 |  window.addEventListener("DOMContentLoaded", function(){
 89 |    displayMenuItems(menu);
 90 |  });
 91 | 
 92 | filterBtns.forEach(function(btn){
 93 |    btn.addEventListener("click", function(e){
 94 |       const category = e.currentTarget.dataset.id;
 95 |       const menuCategory = menu.filter(function(menuItem){
 96 |          if(menuItem.category === category){
 97 |             return menuItem
 98 |          }
 99 |          
100 |       });
101 |       if(category === "all"){
102 |          displayMenuItems(menu);
103 |       } else {
104 |          displayMenuItems(menuCategory);
105 |       }
106 |    });
107 | });
108 | 
109 | 
110 | 
111 | 
112 | 
113 | 
114 | 
115 | 
116 | function displayMenuItems(menuItems){
117 |    let displayMenu = menuItems.map(function(item){
118 |       return `
119 |       <article class="menu-item">
120 |       <img src=${item.img} class="photo" alt=${item.title}>
121 |       <div class="item-info">
122 |         <header>
123 |           <h4>${item.title}</h4>
124 |           <h4 class="prices">${item.price}$</h4>
125 |         </header>
126 |         <p class="item-text">
127 |          ${item.desc}
128 |         </p>
129 |       </div>
130 |     </article>
131 |       `;
132 |    });
133 |    displayMenu = displayMenu.join("");
134 |    sectionCenter.innerHTML = displayMenu;
135 | }


--------------------------------------------------------------------------------
/Menu/menu-item.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Menu/menu-item.jpeg


--------------------------------------------------------------------------------
/Mobil_Navigation/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Drag n Drop</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
11 |       integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
12 |       crossorigin="anonymous"
13 |       referrerpolicy="no-referrer"
14 |     />
15 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
16 | </head>
17 | <body>
18 | 
19 |     <div class="phone">
20 |         <div class="content show about">
21 |             <div class="text">
22 |                 <h1>About Me</h1>
23 |                 <p>I am a Front-End Developer</p>
24 |             </div>
25 |         </div>
26 |         <div class="content blog">
27 |         <div class="text">
28 |             <h1>Blog</h1>
29 |             <p>Here are my articles</p>
30 |         </div>
31 |         </div>
32 |         <div class="content map">
33 |             <div class="text">
34 |                 <h1>Roadmap</h1>
35 |                 <p>My life roadmap...</p>
36 |             </div>
37 |         </div>
38 |         <div class="content contact">
39 |             <div class="text">
40 |                 <h1>Contact</h1>
41 |                 <p>You can contact me using the links here</p>
42 |             </div>
43 |         </div>
44 |         <nav>
45 |             <ul>
46 |                 <li class="active"><i class="fa-solid fa-address-card"></i><p>About me</p></li>
47 |                 <li><i class="fa-brands fa-blogger"></i><p>Blog</p></li>
48 |                 <li><i class="fa-solid fa-map"></i><p>Roadmap</p></li>
49 |                 <li><i class="fa-solid fa-book-open-reader"></i><p>Contact</p></li>
50 |             </ul>
51 |         </nav>
52 |     </div>
53 |     
54 | 
55 |     <script src='main.js'></script>
56 | </body>
57 | </html>


--------------------------------------------------------------------------------
/Mobil_Navigation/main.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | body{
  6 |     font-family: sans-serif;
  7 | 
  8 |     background: linear-gradient(to bottom,
  9 |     rgb(90, 90, 90) 0%,
 10 |     rgb(179, 179, 179) 100%
 11 |     );
 12 | 
 13 |     display: flex;
 14 |     justify-content: center;
 15 |     align-items: center;
 16 |     height: 100vh;
 17 |     margin: 0;
 18 | }
 19 | 
 20 | .phone{
 21 |     position: relative;
 22 |     overflow: hidden;
 23 |     border: 3px solid white;
 24 |     box-shadow: rgba(0, 0, 0, 0.4) 3px 9px 9px 3px;
 25 |     border-radius: 20px;
 26 |     height: 720px;
 27 |     width: 360px;
 28 | }
 29 | 
 30 | .phone .content{
 31 |     position: absolute;
 32 |     opacity: 0;
 33 |     top: 0;
 34 |     left: 0;
 35 |     width: 100%;
 36 |     display: flex;
 37 |     justify-content: center;
 38 |     align-items: center;
 39 |     text-align: center;
 40 |     height: calc(100% - 60px);
 41 |     transition: opacity 0.4s ease;
 42 | }
 43 | 
 44 | .phone .content.about {
 45 |     background-image: url(https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80);
 46 | }
 47 |   
 48 | .phone .content.blog {
 49 |     background-image: url(https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
 50 | }
 51 |   
 52 | .phone .content.map {
 53 |     background-image: url(https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80);
 54 | }
 55 |   
 56 | .phone .content.contact {
 57 |     background-image: url(https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80);
 58 | }
 59 | 
 60 | .phone .content.show{
 61 |     opacity: 1;
 62 | }
 63 | 
 64 | .phone .content .text{
 65 |     background: rgba(0, 0, 0, 0.7);
 66 |     color: white;
 67 |     padding: 4rem 1rem;
 68 |     border-radius: 10px;
 69 | }
 70 | 
 71 | nav{
 72 |     position: absolute;
 73 |     bottom: 0;
 74 |     left: 0;
 75 |     width: 100%;
 76 |     margin-top: -5px;
 77 | }
 78 | 
 79 | nav ul{
 80 |     background-color: white;
 81 |     color: #333;
 82 |     list-style-type: none;
 83 |     display: flex;
 84 |     margin: 0;
 85 |     padding: 0;
 86 |     height: 60px;
 87 | }
 88 | 
 89 | nav li{
 90 |     cursor: pointer;
 91 |     flex: 1;
 92 |     padding: 10px;
 93 |     text-align: center;
 94 | }
 95 | 
 96 | nav ul li p{
 97 |     font-size: 12px;
 98 |     margin: 2px 0;
 99 | }
100 | 
101 | nav ul li:hover, 
102 | nav ul li.active{
103 |     color: tomato;
104 | }


--------------------------------------------------------------------------------
/Mobil_Navigation/main.js:
--------------------------------------------------------------------------------
 1 | const contents = document.querySelectorAll(".content")
 2 | const navBtn = document.querySelectorAll("nav ul li")
 3 | 
 4 | navBtn.forEach((btn,idX) => {
 5 |   btn.addEventListener("click",() => {
 6 |     hideAllContents()
 7 |     hideAllBtns()
 8 | 
 9 |     btn.classList.add("active")
10 |     contents[idX].classList.add("show")
11 |   })
12 | })
13 | 
14 | function hideAllContents(){
15 |   contents.forEach((content) => content.classList.remove("show"))
16 | }
17 | 
18 | function hideAllBtns(){
19 |   navBtn.forEach((item) => item.classList.remove("active"))
20 | }


--------------------------------------------------------------------------------
/Modal/hero.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Modal/hero.jpeg


--------------------------------------------------------------------------------
/Modal/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Modal </title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 | </head>
11 | <body>
12 | 
13 |   <header class="hero">
14 |     <div class="banner">
15 |       <h1>modal project</h1>
16 |       <button class="btn modal-btn">
17 |         open modal
18 |       </button>
19 |     </div>
20 |   </header>
21 |   <div class="modal-overlay">
22 |     <div class="modal-container">
23 |       <h3>modal content</h3>
24 |       <button class="close-btn">
25 |         <i class="fas fa-times"></i>
26 |       </button>
27 |     </div>
28 |   </div>
29 | 
30 |    <script src='main.js'></script>
31 | </body>
32 | </html> 


--------------------------------------------------------------------------------
/Modal/main.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: #49a6e9;
 22 |   /* --clr-primary-5: rgb(73, 166, 233); */
 23 |   /* lighter shades of primary color */
 24 |   --clr-primary-6: hsl(205, 89%, 70%);
 25 |   --clr-primary-7: hsl(205, 90%, 76%);
 26 |   --clr-primary-8: hsl(205, 86%, 81%);
 27 |   --clr-primary-9: hsl(205, 90%, 88%);
 28 |   --clr-primary-10: hsl(205, 100%, 96%);
 29 |   /* darkest grey - used for headings */
 30 |   --clr-grey-1: hsl(209, 61%, 16%);
 31 |   --clr-grey-2: hsl(211, 39%, 23%);
 32 |   --clr-grey-3: hsl(209, 34%, 30%);
 33 |   --clr-grey-4: hsl(209, 28%, 39%);
 34 |   /* grey used for paragraphs */
 35 |   --clr-grey-5: hsl(210, 22%, 49%);
 36 |   --clr-grey-6: hsl(209, 23%, 60%);
 37 |   --clr-grey-7: hsl(211, 27%, 70%);
 38 |   --clr-grey-8: hsl(210, 31%, 80%);
 39 |   --clr-grey-9: hsl(212, 33%, 89%);
 40 |   --clr-grey-10: hsl(210, 36%, 96%);
 41 |   --clr-white: #fff;
 42 |   --clr-red-dark: hsl(360, 67%, 44%);
 43 |   --clr-red-light: hsl(360, 71%, 66%);
 44 |   --clr-green-dark: hsl(125, 67%, 44%);
 45 |   --clr-green-light: hsl(125, 71%, 66%);
 46 |   --clr-black: #222;
 47 |   --ff-primary: "Roboto", sans-serif;
 48 |   --ff-secondary: "Open Sans", sans-serif;
 49 |   --transition: all 0.3s linear;
 50 |   --spacing: 0.25rem;
 51 |   --radius: 0.5rem;
 52 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 53 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 54 |   --max-width: 1170px;
 55 |   --fixed-width: 620px;
 56 | }
 57 | /*
 58 | =============== 
 59 | Global Styles
 60 | ===============
 61 | */
 62 | 
 63 | *,
 64 | ::after,
 65 | ::before {
 66 |   margin: 0;
 67 |   padding: 0;
 68 |   box-sizing: border-box;
 69 | }
 70 | body {
 71 |   font-family: var(--ff-secondary);
 72 |   background: var(--clr-grey-10);
 73 |   color: var(--clr-grey-1);
 74 |   line-height: 1.5;
 75 |   font-size: 0.875rem;
 76 | }
 77 | ul {
 78 |   list-style-type: none;
 79 | }
 80 | a {
 81 |   text-decoration: none;
 82 | }
 83 | img:not(.logo) {
 84 |   width: 100%;
 85 | }
 86 | img {
 87 |   display: block;
 88 | }
 89 | 
 90 | h1,
 91 | h2,
 92 | h3,
 93 | h4 {
 94 |   letter-spacing: var(--spacing);
 95 |   text-transform: capitalize;
 96 |   line-height: 1.25;
 97 |   margin-bottom: 0.75rem;
 98 |   font-family: var(--ff-primary);
 99 | }
100 | h1 {
101 |   font-size: 3rem;
102 | }
103 | h2 {
104 |   font-size: 2rem;
105 | }
106 | h3 {
107 |   font-size: 1.25rem;
108 | }
109 | h4 {
110 |   font-size: 0.875rem;
111 | }
112 | p {
113 |   margin-bottom: 1.25rem;
114 |   color: var(--clr-grey-5);
115 | }
116 | @media screen and (min-width: 800px) {
117 |   h1 {
118 |     font-size: 4rem;
119 |   }
120 |   h2 {
121 |     font-size: 2.5rem;
122 |   }
123 |   h3 {
124 |     font-size: 1.75rem;
125 |   }
126 |   h4 {
127 |     font-size: 1rem;
128 |   }
129 |   body {
130 |     font-size: 1rem;
131 |   }
132 |   h1,
133 |   h2,
134 |   h3,
135 |   h4 {
136 |     line-height: 1;
137 |   }
138 | }
139 | /*  global classes */
140 | 
141 | .btn {
142 |   text-transform: uppercase;
143 |   background: transparent;
144 |   color: var(--clr-black);
145 |   padding: 0.375rem 0.75rem;
146 |   letter-spacing: var(--spacing);
147 |   display: inline-block;
148 |   transition: var(--transition);
149 |   font-size: 0.875rem;
150 |   border: 2px solid var(--clr-black);
151 |   cursor: pointer;
152 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
153 |   border-radius: var(--radius);
154 | }
155 | .btn:hover {
156 |   color: var(--clr-white);
157 |   background: var(--clr-black);
158 | }
159 | /* section */
160 | .section {
161 |   padding: 5rem 0;
162 | }
163 | 
164 | .section-center {
165 |   width: 90vw;
166 |   margin: 0 auto;
167 |   max-width: 1170px;
168 | }
169 | @media screen and (min-width: 992px) {
170 |   .section-center {
171 |     width: 95vw;
172 |   }
173 | }
174 | main {
175 |   min-height: 100vh;
176 |   display: grid;
177 |   place-items: center;
178 | }
179 | /*
180 | =============== 
181 | Modal
182 | ===============
183 | */
184 | .hero {
185 |   min-height: 100vh;
186 |   background: url("./hero.jpeg") center/cover no-repeat;
187 |   display: grid;
188 |   place-items: center;
189 | }
190 | .banner {
191 |   background: var(--clr-white);
192 |   padding: 4rem 0;
193 |   border-radius: var(--radius);
194 |   box-shadow: var(--light-shadow);
195 |   text-align: center;
196 |   width: 90vw;
197 |   max-width: var(--fixed-width);
198 | }
199 | .modal-btn {
200 |   margin-top: 2rem;
201 |   background: var(--clr-primary-5);
202 |   border-color: var(--clr-primary-5);
203 |   color: var(--clr-white);
204 | }
205 | .modal-btn:hover {
206 |   background: transparent;
207 |   color: var(--clr-primary-5);
208 | }
209 | .modal-overlay {
210 |   position: fixed;
211 |   top: 0;
212 |   left: 0;
213 |   width: 100%;
214 |   height: 100%;
215 |   background: rgba(73, 166, 233, 0.5);
216 |   display: grid;
217 |   place-items: center;
218 |   transition: var(--transition);
219 |   visibility: hidden;
220 |   z-index: -10;
221 | }
222 | /* OPEN/CLOSE MODAL */
223 | .open-modal {
224 |   visibility: visible;
225 |   z-index: 10;
226 | }
227 | .modal-container {
228 |   background: var(--clr-white);
229 |   border-radius: var(--radius);
230 |   width: 90vw;
231 |   height: 30vh;
232 |   max-width: var(--fixed-width);
233 |   text-align: center;
234 |   display: grid;
235 |   place-items: center;
236 |   position: relative;
237 | }
238 | .close-btn {
239 |   position: absolute;
240 |   top: 1rem;
241 |   right: 1rem;
242 |   font-size: 2rem;
243 |   background: transparent;
244 |   border-color: transparent;
245 |   color: var(--clr-red-dark);
246 |   cursor: pointer;
247 |   transition: var(--transition);
248 | }
249 | .close-btn:hover {
250 |   color: var(--clr-red-light);
251 |   transform: scale(1.3);
252 | }
253 | 


--------------------------------------------------------------------------------
/Modal/main.js:
--------------------------------------------------------------------------------
 1 | const modalBtn = document.querySelector(".modal-btn");
 2 | const modal = document.querySelector(".modal-overlay");
 3 | const closeBtn = document.querySelector(".close-btn");
 4 | 
 5 | modalBtn.addEventListener("click", function() {
 6 |    modal.classList.add("open-modal");
 7 | })
 8 | 
 9 | closeBtn.addEventListener("click", function() {
10 |    modal.classList.remove("open-modal");
11 | })


--------------------------------------------------------------------------------
/Navbar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Navbar </title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 | </head>
11 | <body>
12 | 
13 |   <nav>
14 |     <div class="nav-center">
15 |       <div class="nav-header">
16 |         <img src="./logo.svg" alt="Logo" class="logo">
17 |         <button class="nav-toggle">
18 |           <i class="fas fa-bars"></i>
19 |         </button>
20 |       </div>
21 |       <!-- links -->
22 |       <ul class="links">
23 |         <li>
24 |           <a href="index.html">home</a>
25 |         </li>
26 |         <li>
27 |           <a href="about.html">about</a>
28 |         </li>
29 |         <li>
30 |           <a href="projects.html">projects</a>
31 |         </li>
32 |         <li>
33 |           <a href="contact.html">contact</a>
34 |         </li>
35 |       </ul>
36 |       <!-- social media -->
37 |       <ul class="social-icons">
38 |         <li>
39 |           <a href="https://www.twitter.com">
40 |             <i class="fab fa-facebook"></i>
41 |           </a>
42 |         </li>
43 |         <li>
44 |           <a href="https://www.twitter.com">
45 |             <i class="fab fa-twitter"></i>
46 |           </a>
47 |         </li>
48 |         <li>
49 |           <a href="https://www.twitter.com">
50 |             <i class="fab fa-behance"></i>
51 |           </a>
52 |         </li>
53 |         <li>
54 |           <a href="https://www.twitter.com">
55 |             <i class="fab fa-linkedin"></i>
56 |           </a>
57 |         </li>
58 |         <li>
59 |           <a href="https://www.twitter.com">
60 |             <i class="fab fa-sketch"></i>
61 |           </a>
62 |         </li>
63 |       </ul>
64 |     </div>
65 |   </nav>
66 | 
67 |    <script src='main.js'></script>
68 | </body>
69 | </html> 


--------------------------------------------------------------------------------
/Navbar/main.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: hsl(205, 78%, 60%);
 22 |   /* lighter shades of primary color */
 23 |   --clr-primary-6: hsl(205, 89%, 70%);
 24 |   --clr-primary-7: hsl(205, 90%, 76%);
 25 |   --clr-primary-8: hsl(205, 86%, 81%);
 26 |   --clr-primary-9: hsl(205, 90%, 88%);
 27 |   --clr-primary-10: hsl(205, 100%, 96%);
 28 |   /* darkest grey - used for headings */
 29 |   --clr-grey-1: hsl(209, 61%, 16%);
 30 |   --clr-grey-2: hsl(211, 39%, 23%);
 31 |   --clr-grey-3: hsl(209, 34%, 30%);
 32 |   --clr-grey-4: hsl(209, 28%, 39%);
 33 |   /* grey used for paragraphs */
 34 |   --clr-grey-5: hsl(210, 22%, 49%);
 35 |   --clr-grey-6: hsl(209, 23%, 60%);
 36 |   --clr-grey-7: hsl(211, 27%, 70%);
 37 |   --clr-grey-8: hsl(210, 31%, 80%);
 38 |   --clr-grey-9: hsl(212, 33%, 89%);
 39 |   --clr-grey-10: hsl(210, 36%, 96%);
 40 |   --clr-white: #fff;
 41 |   --clr-red-dark: hsl(360, 67%, 44%);
 42 |   --clr-red-light: hsl(360, 71%, 66%);
 43 |   --clr-green-dark: hsl(125, 67%, 44%);
 44 |   --clr-green-light: hsl(125, 71%, 66%);
 45 |   --clr-black: #222;
 46 |   --ff-primary: "Roboto", sans-serif;
 47 |   --ff-secondary: "Open Sans", sans-serif;
 48 |   --transition: all 0.3s linear;
 49 |   --spacing: 0.1rem;
 50 |   --radius: 0.25rem;
 51 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 52 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 53 |   --max-width: 1170px;
 54 |   --fixed-width: 620px;
 55 | }
 56 | /*
 57 | =============== 
 58 | Global Styles
 59 | ===============
 60 | */
 61 | 
 62 | *,
 63 | ::after,
 64 | ::before {
 65 |   margin: 0;
 66 |   padding: 0;
 67 |   box-sizing: border-box;
 68 | }
 69 | body {
 70 |   font-family: var(--ff-secondary);
 71 |   background: var(--clr-grey-10);
 72 |   color: var(--clr-grey-1);
 73 |   line-height: 1.5;
 74 |   font-size: 0.875rem;
 75 | }
 76 | ul {
 77 |   list-style-type: none;
 78 | }
 79 | a {
 80 |   text-decoration: none;
 81 | }
 82 | h1,
 83 | h2,
 84 | h3,
 85 | h4 {
 86 |   letter-spacing: var(--spacing);
 87 |   text-transform: capitalize;
 88 |   line-height: 1.25;
 89 |   margin-bottom: 0.75rem;
 90 |   font-family: var(--ff-primary);
 91 | }
 92 | h1 {
 93 |   font-size: 3rem;
 94 | }
 95 | h2 {
 96 |   font-size: 2rem;
 97 | }
 98 | h3 {
 99 |   font-size: 1.25rem;
100 | }
101 | h4 {
102 |   font-size: 0.875rem;
103 | }
104 | p {
105 |   margin-bottom: 1.25rem;
106 |   color: var(--clr-grey-5);
107 | }
108 | @media screen and (min-width: 800px) {
109 |   h1 {
110 |     font-size: 4rem;
111 |   }
112 |   h2 {
113 |     font-size: 2.5rem;
114 |   }
115 |   h3 {
116 |     font-size: 1.75rem;
117 |   }
118 |   h4 {
119 |     font-size: 1rem;
120 |   }
121 |   body {
122 |     font-size: 1rem;
123 |   }
124 |   h1,
125 |   h2,
126 |   h3,
127 |   h4 {
128 |     line-height: 1;
129 |   }
130 | }
131 | /*  global classes */
132 | 
133 | /* section */
134 | .section {
135 |   padding: 5rem 0;
136 | }
137 | 
138 | .section-center {
139 |   width: 90vw;
140 |   margin: 0 auto;
141 |   max-width: 1170px;
142 | }
143 | @media screen and (min-width: 992px) {
144 |   .section-center {
145 |     width: 95vw;
146 |   }
147 | }
148 | main {
149 |   min-height: 100vh;
150 |   display: grid;
151 |   place-items: center;
152 | }
153 | 
154 | /*
155 | =============== 
156 | Navbar
157 | ===============
158 | */
159 | nav {
160 |   background: var(--clr-white);
161 |   box-shadow: var(--light-shadow);
162 | }
163 | .nav-header {
164 |   display: flex;
165 |   align-items: center;
166 |   justify-content: space-between;
167 |   padding: 1rem;
168 | }
169 | .nav-toggle {
170 |   font-size: 1.5rem;
171 |   color: var(--clr-primary-5);
172 |   background: transparent;
173 |   border-color: transparent;
174 |   transition: var(--transition);
175 |   cursor: pointer;
176 | }
177 | .nav-toggle:hover {
178 |   color: var(--clr-primary-1);
179 |   transform: rotate(90deg);
180 | }
181 | .logo {
182 |   height: 40px;
183 | }
184 | .links a {
185 |   color: var(--clr-grey-3);
186 |   font-size: 1rem;
187 |   text-transform: capitalize;
188 |   letter-spacing: var(--spacing);
189 |   display: block;
190 |   padding: 0.5rem 1rem;
191 |   transition: var(--transition);
192 | }
193 | .links a:hover {
194 |   background: var(--clr-primary-8);
195 |   color: var(--clr-primary-5);
196 |   padding-left: 1.5rem;
197 | }
198 | .social-icons {
199 |   display: none;
200 | }
201 | .links {
202 |   height: 0;
203 |   overflow: hidden;
204 |   transition: var(--transition);
205 | }
206 | .show-links {
207 |   height: 10rem;
208 | }
209 | @media screen and (min-width: 800px) {
210 |   .nav-center {
211 |     max-width: 1170px;
212 |     margin: 0 auto;
213 |     display: flex;
214 |     align-items: center;
215 |     justify-content: space-between;
216 |     padding: 1rem;
217 |   }
218 |   .nav-header {
219 |     padding: 0;
220 |   }
221 |   .nav-toggle {
222 |     display: none;
223 |   }
224 |   .links {
225 |     height: auto;
226 |     display: flex;
227 |   }
228 |   .links a {
229 |     padding: 0;
230 |     margin: 0 0.5rem;
231 |   }
232 |   .links a:hover {
233 |     padding: 0;
234 |     background: transparent;
235 |   }
236 |   .social-icons {
237 |     display: flex;
238 |   }
239 |   .social-icons a {
240 |     margin: 0 0.5rem;
241 |     color: var(--clr-primary-5);
242 |     transition: var(--transition);
243 |   }
244 |   .social-icons a:hover {
245 |     color: var(--clr-primary-7);
246 |   }
247 | }


--------------------------------------------------------------------------------
/Navbar/main.js:
--------------------------------------------------------------------------------
 1 | const navToggle = document.querySelector(".nav-toggle");
 2 | const links = document.querySelector(".links");
 3 | 
 4 | navToggle.addEventListener("click", function(){
 5 |    //This codes are other way
 6 |    // if(links.classList.contains("show-links")){
 7 |    //    links.classList.remove("show-links");
 8 |    // }
 9 |    // else{
10 |    //    links.classList.add("show-links");
11 |    // }
12 |    links.classList.toggle("show-links");
13 | });


--------------------------------------------------------------------------------
/Notes/image/cork.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Notes/image/cork.png


--------------------------------------------------------------------------------
/Notes/image/pin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Notes/image/pin.png


--------------------------------------------------------------------------------
/Notes/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Notes</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 |     <link
10 |       rel="stylesheet"
11 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
12 |       integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
13 |       crossorigin="anonymous"
14 |       referrerpolicy="no-referrer"
15 |     />
16 | </head>
17 | <body>
18 | 
19 |     <button id="add" class="add">
20 |         <i class="fa-solid fa-notes-medical"></i> New Note
21 |     </button>
22 | 
23 |     <!-- <div class="note">
24 |         <img src="./image/pin.png" alt="pin">
25 |         <div class="tools">
26 |             <button class="edit">
27 |                 <i class="fa-solid fa-pencil"></i>
28 |             </button>
29 |             <button class="delete">
30 |                 <i class="fa-solid fa-eraser"></i>
31 |             </button>
32 |         </div>
33 |         <div class="main hidden"></div>
34 |         <textarea></textarea>
35 |     </div> -->
36 | 
37 |     <script src='main.js'></script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/Notes/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |      box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |      font-family: cursive;
 7 |      background: url(./image/cork.png);
 8 |      display: flex;
 9 |      flex-wrap: wrap;
10 |      padding-top: 3rem;
11 | }
12 | 
13 | .add{
14 |      position: fixed;
15 |      top: 1rem;
16 |      right: 1rem;
17 |      color: white;
18 |      background: #ff5a5f;
19 |      border: none;
20 |      padding: 0.4rem 1.2rem;
21 |      font-size: 1.5rem;
22 |      font-family: cursive;
23 |      font-weight: bold;
24 |      box-shadow: rgba(0, 0, 0, 0.6) 6px 6px 9px;
25 |      border-radius: 10px;
26 |      cursor: pointer;
27 | }
28 | 
29 | .add:active{
30 |      transform: scale(0.98);
31 | }
32 | 
33 | .note{
34 |      background: white;
35 |      box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 7px;
36 |      margin: 30px 20px;
37 |      height: 400px;
38 |      width: 400px;
39 |      border-radius: 5px;
40 | }
41 | 
42 | .note .tools{
43 |      background-color: #ff5a5f;
44 |      display: flex;
45 |      justify-content: flex-end;
46 |      padding: 0.5rem;
47 | }
48 | 
49 | .note img{
50 |      width: 35px;
51 |      position: absolute;
52 |      padding: 5px;
53 | }
54 | 
55 | .note .tools button {
56 |      border: none;
57 |      background-color: transparent;
58 |      color: white;
59 |      font-size: 1.2rem;
60 |      cursor: pointer;
61 | }
62 | 
63 | .note textarea{
64 |      outline: none;
65 |      font-family: cursive;
66 |      font-size: 1.2rem;
67 |      border: none;
68 |      height: 400px;
69 |      width: 100%;
70 |      padding: 20px;
71 | }
72 | 
73 | .main{
74 |      padding: 20px;
75 | }
76 | 
77 | .hidden{
78 |      display: none;
79 | }


--------------------------------------------------------------------------------
/Notes/main.js:
--------------------------------------------------------------------------------
 1 | const addBtn = document.getElementById("add")
 2 | 
 3 | addBtn.addEventListener("click", () => addNewNote())
 4 | 
 5 | function addNewNote(text = ""){
 6 |     const note = document.createElement("div")
 7 |     note.classList.add("note")
 8 | 
 9 |     note.innerHTML = `
10 |         <img src="./image/pin.png" alt="pin">
11 |         <div class="tools">
12 |             <button class="edit">
13 |                 <i class="fa-solid fa-pencil"></i>
14 |             </button>
15 |             <button class="delete">
16 |                 <i class="fa-solid fa-eraser"></i>
17 |             </button>
18 |         </div>
19 | 
20 |         <div class="main ${text ? '' : 'hidden'}"></div>
21 |         <textarea class="${text ? "hidden" : ""}"></textarea>
22 |     `
23 | 
24 |     const deleteBtn = note.querySelector(".delete")
25 | 
26 |     deleteBtn.addEventListener("click", () => {
27 |         note.remove()
28 | 
29 |         updateLS()
30 |     })
31 | 
32 |     const editBtn = note.querySelector(".edit")
33 |     const main = note.querySelector(".main")
34 |     const textArea = note.querySelector("textarea")
35 | 
36 |     editBtn.addEventListener("click", () => {
37 |         main.classList.toggle("hidden")
38 |         textArea.classList.toggle("hidden")
39 |     })
40 | 
41 |     textArea.addEventListener("input", (e) => {
42 |         const {value} = e.target
43 |         main.innerHTML = marked(value)
44 | 
45 |         updateLS()
46 |     })
47 | 
48 |     document.body.appendChild(note)
49 | }
50 | 
51 | 
52 | function updateLS(){
53 |     const notesText = document.querySelectorAll("textarea")
54 | 
55 |     const notes = []
56 | 
57 |     notesText.forEach((note) => notes.push(note.value))
58 |     localStorage.setItem("notes", JSON.stringify(notes))
59 | }
60 | 
61 | 
62 | const notes = JSON.parse(localStorage.getItem("notes"))
63 | 
64 | if(notes){
65 |     notes.forEach(note => addNewNote(note))
66 | }


--------------------------------------------------------------------------------
/Notification/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Slider</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="notifContainer">
13 |         <div class="notif">Instagram Bildirim</div>
14 |         <div class="notif">Twitter Bildirim</div>
15 |     </div>
16 |     <button class="button" id="button">Bildirim Gönder</button>
17 | 
18 |     <script src='main.js'></script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Notification/main.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     font-family: sans-serif;
 3 |     display: flex;
 4 |     flex-direction: column;
 5 |     justify-content: center;
 6 |     align-items: center;
 7 |     height: 100vh;
 8 |     margin: 0;
 9 | }
10 | 
11 | .button{
12 |     background-color: tomato;
13 |     border: none;
14 |     border-radius: 2rem;
15 |     font-family: sans-serif;
16 |     padding: 1rem 2rem;
17 |     color: white;
18 |     font-weight: bold;
19 |     font-size: 1.2rem;
20 |     letter-spacing: 2px;
21 |     cursor: pointer;
22 | }
23 | 
24 | button:focus{
25 |     outline: none;
26 | }
27 | 
28 | button:active{
29 |     transform: scale(0.95);
30 | }
31 | 
32 | .notifContainer{
33 |     position: fixed;
34 |     bottom: 10px;
35 |     right: 10px;
36 |     display: flex;
37 |     flex-direction: column;
38 |     align-items: flex-end;
39 | }
40 | 
41 | .notif{
42 |     padding: 0.5rem 1rem;
43 |     margin: 0.5rem;
44 |     border-radius: 1rem;
45 |     color: white;
46 | }
47 | 
48 | .notif.red{
49 |     background-color: red;
50 | }
51 | 
52 | .notif.blue{
53 |     background-color: blue;
54 | }
55 | 
56 | .notif.green{
57 |     background-color: green;
58 | }
59 | 
60 | .notif.gray{
61 |     background-color: gray;
62 | }
63 | 
64 | .notif.purple{
65 |     background-color: rebeccapurple;
66 | }
67 | 
68 | .notif.black{
69 |     background-color: black;
70 | }


--------------------------------------------------------------------------------
/Notification/main.js:
--------------------------------------------------------------------------------
 1 | const notifContainer = document.querySelector(".notifContainer")
 2 | const button = document.querySelector("#button")
 3 | 
 4 | const notifications = [
 5 |   "Instagram bildirim",
 6 |   "Twitter Bildirim",
 7 |   "Youtube bildirim",
 8 |   "Medium Bildirim",
 9 |   "Linkedin bildirim",
10 |   "Github Bildirim",
11 | ]
12 | 
13 | const colors = ["red","purple","black","gray","green","blue"]
14 | 
15 | button.addEventListener("click", () => createNotification())
16 | 
17 | function createNotification(){
18 |   const notif = document.createElement("div")
19 |   notif.classList.add("notif")
20 |   notif.classList.add(getRandomColor())
21 | 
22 |   notif.innerText = getRandomNotif()
23 | 
24 |   notifContainer.appendChild(notif)
25 | 
26 |   setTimeout(() => {
27 |     notif.remove()
28 |   }, 3000)
29 | }
30 | 
31 | function getRandomNotif(){
32 |   return notifications[Math.floor(Math.random() * notifications.length)]
33 | }
34 | 
35 | function getRandomColor(){
36 |   return colors[Math.floor(Math.random() * colors.length)]
37 | }


--------------------------------------------------------------------------------
/Password_Strenght_TailwindCSS/image/shopping.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Password_Strenght_TailwindCSS/image/shopping.png


--------------------------------------------------------------------------------
/Password_Strenght_TailwindCSS/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Drag n Drop</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link
 9 |       rel="stylesheet"
10 |       href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
11 |       referrerpolicy="no-referrer"
12 |     />
13 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
14 | </head>
15 | <body>
16 | 
17 |     <div class="background" id="background"></div>
18 |     <div class="bg-white rounded p-10 text-center shadow-md">
19 |         <h1 class="text-lg font-bold text-purple-700">Sing up</h1>
20 |         <p class="text-sm text-gray-700">Looks like you don't have an account. Let's create a new accout for <span class="font-bold text-purple-500">rbctugrul@gmail.com</span></p>
21 |         <div class="my-4 text-left">
22 |             <label for="email" class="text-gray-900">Email:</label>
23 |             <input type="text" class="border block w-full p-2 mt-2 rounded" id="email" required placeholder="Please Enter Email">
24 |         </div>
25 |         <div class="my-4 text-left">
26 |             <label for="password" id="passwordLabel" class="text-gray-900">Password:</label>
27 |             <input type="password" class="border block w-full p-2 mt-2 rounded" id="password" required placeholder="Please Enter Password">
28 |         </div>
29 |         <button class="bg-purple-800 text-white py-2 mt-2 inline-block w-full rounded" type="submit">Continue</button>
30 |     </div>
31 | 
32 |     <script src='main.js'></script>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/Password_Strenght_TailwindCSS/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |     display: flex;
 7 |     justify-content: center;
 8 |     align-items: center;
 9 |     height: 100vh;
10 | }
11 | 
12 | .background{
13 |     background: url(image/shopping.png) no-repeat center center/cover;
14 |     position: absolute;
15 |     top: 0;
16 |     left: 0;
17 |     right: 0;
18 |     bottom: 0;
19 |     z-index: -1;
20 |     filter: blur(20px);
21 | }


--------------------------------------------------------------------------------
/Password_Strenght_TailwindCSS/main.js:
--------------------------------------------------------------------------------
 1 | const background = document.getElementById("background")
 2 | const passwordLabel = document.getElementById("passwordLabel")
 3 | const passwordInput = document.getElementById("password")
 4 | 
 5 | passwordInput.addEventListener("input", (e)=> {
 6 |   const length = e.target.value.length
 7 |   const bgBlur = 20 - (length*2)
 8 |   background.style.filter = `blur(${bgBlur}px)`
 9 | 
10 |   if(length >= 10){
11 |     passwordLabel.innerText = "Strong Password"
12 |   }else{
13 |     passwordLabel.innerText = "Password"
14 |   }
15 | })


--------------------------------------------------------------------------------
/Progress-Steps/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Progress Steps</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |    <div class="container">
13 |       <div class="progress-container">
14 |          <div class="progress" id="progress"></div>
15 |          <div class="circle active">1</div>
16 |          <div class="circle">2</div>
17 |          <div class="circle">3</div>
18 |          <div class="circle">4</div>
19 |          <div class="circle">5</div>
20 |       </div>
21 | 
22 |       <button class="btn" id="prev" disabled>Önceki</button>
23 |       <button class="btn" id="next">Sonraki</button>
24 |    </div>
25 | 
26 |    <script src='main.js'></script>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/Progress-Steps/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |    font-family: sans-serif;
 3 |    box-sizing: border-box;
 4 | }
 5 | 
 6 | body{
 7 |    display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     margin: 0px;
12 |     overflow: hidden;
13 | }
14 | 
15 | .container{
16 |    text-align: center;
17 | }
18 | 
19 | .progress-container{
20 |    display: flex;
21 |     justify-content: space-between;
22 |     position: relative;
23 |     margin-bottom: 30px;
24 |     width: 550px;
25 |     max-width: 100%;
26 | }
27 | 
28 | .progress-container::before{
29 |    content: '';
30 |     background-color: rgb(169, 169, 169);
31 |     height: 4px;
32 |     width: 100%;
33 |     position: absolute;
34 |     top: 50%;
35 |     left: 0;
36 |     transform: translateY(-50%);
37 |     z-index: -1;
38 |     transition: 0.4s ease;
39 | }
40 | 
41 | .progress{
42 |    background-color: rgb(188, 0, 0);
43 |    height: 4px;
44 |    width: 0%;
45 |    position: absolute;
46 |    top: 50%;
47 |    left: 0;
48 |    transform: translateY(-50%);
49 |    z-index: -1;
50 |    transition: 0.4s ease;
51 | }
52 | 
53 | .circle{
54 |    background-color: #fff;
55 |    border-radius: 50%;
56 |    height: 30px;
57 |    width:30px;
58 |    display: flex;
59 |    align-items: center;
60 |    justify-content: center;
61 |    border: 3px solid rgb(169, 169, 169);
62 |    transition: 0.4s ease;
63 | }
64 | 
65 | .circle.active{
66 |    border-color: rgb(188, 0, 0);
67 | }
68 | 
69 | .btn{
70 |    background-color: rgb(188, 0, 0);
71 |    color: #fff;
72 |    border: 0;
73 |    border-radius: 8px;
74 |    cursor: pointer;
75 |    font-family: inherit;
76 |    padding: 8px 24px;
77 |    font-size: 14px;
78 |    margin: 5px;
79 | }
80 | .btn:active{
81 |    transform: scale(0.98);
82 | }
83 | 
84 | .btn:focus{
85 |    outline: 0;
86 | }
87 | 
88 | .btn:disabled{
89 |    background-color: rgb(169, 169, 169);
90 | }


--------------------------------------------------------------------------------
/Progress-Steps/main.js:
--------------------------------------------------------------------------------
 1 | const progress = document.getElementById("progress");
 2 | const circles = document.querySelectorAll(".circle");
 3 | const prev = document.getElementById("prev");
 4 | const next = document.getElementById("next");
 5 | 
 6 | 
 7 | let currentActive
 8 | 
 9 | currentActive = 1
10 | 
11 | next.addEventListener("click", () => {
12 |    currentActive++;
13 | 
14 |    if(currentActive > circles.length){
15 |        currentActive = circles.length
16 |    }
17 | 
18 |    update();
19 | });
20 | 
21 | prev.addEventListener("click", () => {
22 |    currentActive--;
23 | 
24 |    if(currentActive < 1){
25 |        currentActive = 1;
26 |    }
27 | 
28 |    update();
29 | });
30 | 
31 | 
32 | function update(){
33 |    circles.forEach((circle, index) =>{
34 |       if(index < currentActive){
35 |          circle.classList.add("active");
36 |       }else{
37 |          circle.classList.remove("active")
38 |       }
39 |    })
40 | 
41 |    const actives = document.querySelectorAll(".active");
42 | 
43 |    progress.style.width = ((actives.length - 1) * 25) + "%"
44 | 
45 | 
46 |    if(currentActive === 1){
47 |       prev.disabled = true;
48 |   } else if(currentActive === circles.length){
49 |       next.disabled = true;
50 |   } else{
51 |       prev.disabled = false;
52 |       next.disabled = false;
53 |   }
54 | 
55 | }


--------------------------------------------------------------------------------
/Questions/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Questions</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |     <link
10 |     href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap"
11 |     rel="stylesheet"
12 |     />
13 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
14 | </head>
15 | <body>
16 | 
17 |   <section class="questions">
18 |     <div class="title">
19 |       <h2>general questions</h2>
20 |     </div>
21 |     <div class="section-center">
22 |       <article class="question">
23 |         <div class="question-title">
24 |           <p>do you accept all major credit cards?</p>
25 |           <button type="button" class="question-btn">
26 |             <span class="plus-icon">
27 |               <i class="far fa-plus-square"></i>
28 |             </span>
29 |             <span class="minus-icon">
30 |               <i class="far fa-minus-square"></i>
31 |             </span>
32 |           </button>
33 |         </div>
34 |         <div class="question-text">
35 |           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci fuga doloremque, ipsa quaerat illo nihil accusamus facilis. Itaque voluptas modi, porro architecto eligendi labore praesentium hic, eos quos corrupti doloribus.</p>
36 |         </div>
37 |       </article>
38 |       <article class="question">
39 |         <div class="question-title">
40 |           <p>do you use organic ingredients?</p>
41 |           <button type="button" class="question-btn">
42 |             <span class="plus-icon">
43 |               <i class="far fa-plus-square"></i>
44 |             </span>
45 |             <span class="minus-icon">
46 |               <i class="far fa-minus-square"></i>
47 |             </span>
48 |           </button>
49 |         </div>
50 |         <div class="question-text">
51 |           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci fuga doloremque, ipsa quaerat illo nihil accusamus facilis. Itaque voluptas modi, porro architecto eligendi labore praesentium hic, eos quos corrupti doloribus.</p>
52 |         </div>
53 |       </article>
54 |       <article class="question">
55 |         <div class="question-title">
56 |           <p>do you support local farmer?</p>
57 |           <button type="button" class="question-btn">
58 |             <span class="plus-icon">
59 |               <i class="far fa-plus-square"></i>
60 |             </span>
61 |             <span class="minus-icon">
62 |               <i class="far fa-minus-square"></i>
63 |             </span>
64 |           </button>
65 |         </div>
66 |         <div class="question-text">
67 |           <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci fuga doloremque, ipsa quaerat illo nihil accusamus facilis. Itaque voluptas modi, porro architecto eligendi labore praesentium hic, eos quos corrupti doloribus.</p>
68 |         </div>
69 |       </article>
70 |     </div>
71 |   </section>
72 | 
73 |    <script src='main.js'></script>
74 | </body>
75 | </html> 


--------------------------------------------------------------------------------
/Questions/main.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: #49a6e9;
 22 |   /* lighter shades of primary color */
 23 |   --clr-primary-6: hsl(205, 89%, 70%);
 24 |   --clr-primary-7: hsl(205, 90%, 76%);
 25 |   --clr-primary-8: hsl(205, 86%, 81%);
 26 |   --clr-primary-9: hsl(205, 90%, 88%);
 27 |   --clr-primary-10: hsl(205, 100%, 96%);
 28 |   /* darkest grey - used for headings */
 29 |   --clr-grey-1: hsl(209, 61%, 16%);
 30 |   --clr-grey-2: hsl(211, 39%, 23%);
 31 |   --clr-grey-3: hsl(209, 34%, 30%);
 32 |   --clr-grey-4: hsl(209, 28%, 39%);
 33 |   /* grey used for paragraphs */
 34 |   --clr-grey-5: hsl(210, 22%, 49%);
 35 |   --clr-grey-6: hsl(209, 23%, 60%);
 36 |   --clr-grey-7: hsl(211, 27%, 70%);
 37 |   --clr-grey-8: hsl(210, 31%, 80%);
 38 |   --clr-grey-9: hsl(212, 33%, 89%);
 39 |   --clr-grey-10: hsl(210, 36%, 96%);
 40 |   --clr-white: #fff;
 41 |   --clr-red-dark: hsl(360, 67%, 44%);
 42 |   --clr-red-light: hsl(360, 71%, 66%);
 43 |   --clr-green-dark: hsl(125, 67%, 44%);
 44 |   --clr-green-light: hsl(125, 71%, 66%);
 45 |   --clr-gold: #c59d5f;
 46 |   --clr-black: #222;
 47 |   --ff-primary: "Roboto", sans-serif;
 48 |   --ff-secondary: "Open Sans", sans-serif;
 49 |   --transition: all 0.3s linear;
 50 |   --spacing: 0.25rem;
 51 |   --radius: 0.5rem;
 52 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 53 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 54 |   --max-width: 1170px;
 55 |   --fixed-width: 620px;
 56 | }
 57 | /*
 58 | =============== 
 59 | Global Styles
 60 | ===============
 61 | */
 62 | 
 63 | *,
 64 | ::after,
 65 | ::before {
 66 |   margin: 0;
 67 |   padding: 0;
 68 |   box-sizing: border-box;
 69 | }
 70 | body {
 71 |   font-family: var(--ff-secondary);
 72 |   background: var(--clr-grey-10);
 73 |   color: var(--clr-grey-1);
 74 |   line-height: 1.5;
 75 |   font-size: 0.875rem;
 76 | }
 77 | ul {
 78 |   list-style-type: none;
 79 | }
 80 | a {
 81 |   text-decoration: none;
 82 | }
 83 | img:not(.logo) {
 84 |   width: 100%;
 85 | }
 86 | img {
 87 |   display: block;
 88 | }
 89 | 
 90 | h1,
 91 | h2,
 92 | h3,
 93 | h4 {
 94 |   letter-spacing: var(--spacing);
 95 |   text-transform: capitalize;
 96 |   line-height: 1.25;
 97 |   margin-bottom: 0.75rem;
 98 |   font-family: var(--ff-primary);
 99 | }
100 | h1 {
101 |   font-size: 3rem;
102 | }
103 | h2 {
104 |   font-size: 2rem;
105 | }
106 | h3 {
107 |   font-size: 1.25rem;
108 | }
109 | h4 {
110 |   font-size: 0.875rem;
111 | }
112 | p {
113 |   margin-bottom: 1.25rem;
114 |   color: var(--clr-grey-5);
115 | }
116 | @media screen and (min-width: 800px) {
117 |   h1 {
118 |     font-size: 4rem;
119 |   }
120 |   h2 {
121 |     font-size: 2.5rem;
122 |   }
123 |   h3 {
124 |     font-size: 1.75rem;
125 |   }
126 |   h4 {
127 |     font-size: 1rem;
128 |   }
129 |   body {
130 |     font-size: 1rem;
131 |   }
132 |   h1,
133 |   h2,
134 |   h3,
135 |   h4 {
136 |     line-height: 1;
137 |   }
138 | }
139 | /*  global classes */
140 | 
141 | .btn {
142 |   text-transform: uppercase;
143 |   background: transparent;
144 |   color: var(--clr-black);
145 |   padding: 0.375rem 0.75rem;
146 |   letter-spacing: var(--spacing);
147 |   display: inline-block;
148 |   transition: var(--transition);
149 |   font-size: 0.875rem;
150 |   border: 2px solid var(--clr-black);
151 |   cursor: pointer;
152 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
153 |   border-radius: var(--radius);
154 | }
155 | .btn:hover {
156 |   color: var(--clr-white);
157 |   background: var(--clr-black);
158 | }
159 | /* section */
160 | .section {
161 |   padding: 5rem 0;
162 | }
163 | 
164 | .section-center {
165 |   width: 90vw;
166 |   margin: 0 auto;
167 |   max-width: 1170px;
168 | }
169 | @media screen and (min-width: 992px) {
170 |   .section-center {
171 |     width: 95vw;
172 |   }
173 | }
174 | main {
175 |   min-height: 100vh;
176 |   display: grid;
177 |   place-items: center;
178 | }
179 | /*
180 | =============== 
181 | Questions
182 | ===============
183 | */
184 | .title {
185 |   margin-top: 15vh;
186 |   margin-bottom: 4rem;
187 | }
188 | .title h2 {
189 |   color: var(--clr-gold);
190 |   font-family: "Great Vibes", cursive;
191 |   text-align: center;
192 | }
193 | .section-center {
194 |   max-width: var(--fixed-width);
195 | }
196 | .question {
197 |   background: var(--clr-white);
198 |   border-radius: var(--radius);
199 |   box-shadow: var(--light-shadow);
200 |   padding: 1.5rem 1.5rem 0 1.5rem;
201 |   margin-bottom: 2rem;
202 | }
203 | .question-title {
204 |   display: flex;
205 |   justify-content: space-between;
206 |   align-items: center;
207 |   text-transform: capitalize;
208 |   padding-bottom: 1rem;
209 | }
210 | 
211 | .question-title p {
212 |   margin-bottom: 0;
213 |   letter-spacing: var(--spacing);
214 |   color: var(--clr-grey-1);
215 | }
216 | .question-btn {
217 |   font-size: 1.5rem;
218 |   background: transparent;
219 |   border-color: transparent;
220 |   cursor: pointer;
221 |   color: var(--clr-gold);
222 |   transition: var(--transition);
223 | }
224 | .question-btn:hover {
225 |   transform: rotate(90deg);
226 | }
227 | .question-text {
228 |   padding: 1rem 0 1.5rem 0;
229 |   border-top: 1px solid rgba(0, 0, 0, 0.2);
230 | }
231 | .question-text p {
232 |   margin-bottom: 0;
233 | }
234 | /* hide text */
235 | .question-text {
236 |   display: none;
237 | }
238 | .show-text .question-text {
239 |   display: block;
240 | }
241 | .minus-icon {
242 |   display: none;
243 | }
244 | .show-text .minus-icon {
245 |   display: inline;
246 | }
247 | .show-text .plus-icon {
248 |   display: none;
249 | }
250 | 


--------------------------------------------------------------------------------
/Questions/main.js:
--------------------------------------------------------------------------------
 1 | //using selectors inside the element
 2 | const questions = document.querySelectorAll(".question");
 3 | 
 4 | questions.forEach(function (question) {
 5 |   const btn = question.querySelector(".question-btn");
 6 |   // console.log(btn);
 7 | 
 8 |   btn.addEventListener("click", function () {
 9 |     // console.log(question);
10 | 
11 |     questions.forEach(function (item) {
12 |       if (item !== question) {
13 |         item.classList.remove("show-text");
14 |       }
15 |     });
16 | 
17 |     question.classList.toggle("show-text");
18 |   });
19 | });
20 | 
21 | // traversing the dom
22 | // const btns = document.querySelectorAll(".question-btn");
23 | 
24 | // btns.forEach(function (btn) {
25 | //   btn.addEventListener("click", function (e) {
26 | //     const question = e.currentTarget.parentElement.parentElement;
27 | 
28 | //     question.classList.toggle("show-text");
29 | //   });
30 | // });
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Html_Css_Javascript_Examples
2 | Simple html css javascript examples are here. I will keep updating constantly.
3 | 


--------------------------------------------------------------------------------
/Random-Image/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |   <title>Random Image</title>
 7 |   <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |   <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 |   
12 |   <h1 class="title">2023 Yılı Anlar</h1>
13 |   <div class="container"></div>
14 | 
15 |   <script src='main.js'></script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Random-Image/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |     font-family: sans-serif;
 7 |     display: flex;
 8 |     flex-direction: column;
 9 |     justify-content: center;
10 |     align-items: center;
11 |     min-height: 100vh;
12 |     margin: 0;
13 | }
14 | 
15 | .title{
16 |     text-align: center;
17 |     letter-spacing: 3px;
18 |     margin: 30px 0 30px 0;
19 |     text-transform: uppercase;
20 | }
21 | 
22 | .container{
23 |     display: flex;
24 |     align-items: center;
25 |     justify-content: center;
26 |     flex-wrap: wrap;
27 |     max-width: 1000px;
28 | }
29 | 
30 | .container img{
31 |     object-fit: cover;
32 |     margin: 10px;
33 |     height: 300px;
34 |     width: 300px;
35 |     max-width: 100%;
36 | }


--------------------------------------------------------------------------------
/Random-Image/main.js:
--------------------------------------------------------------------------------
 1 | const container = document.querySelector(".container")
 2 | const unsplashURL = "https://source.unsplash.com/random/"
 3 | const rows = 9
 4 | 
 5 | for(let i = 0; i < rows * 3; i++){
 6 |     const img = document.createElement("img")
 7 |     img.src = `${unsplashURL}${getRandomSize()}`
 8 |     container.appendChild(img)
 9 | }
10 | 
11 | function getRandomNumber() {
12 |     return Math.floor(Math.random() * 10) + 300
13 | }
14 | 
15 | 
16 | 
17 | function getRandomSize() {
18 |     return `${getRandomNumber()}x${getRandomNumber()}`
19 | }
20 | 
21 | console.log(getRandomSize());


--------------------------------------------------------------------------------
/Random-Password/app.js:
--------------------------------------------------------------------------------
 1 | const getRandomLower = () => {
 2 |     return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
 3 | }
 4 | 
 5 | const getRandomUpper = () => {
 6 |     return String.fromCharCode(Math.floor(Math.random() * 26) + 65)
 7 | }
 8 | 
 9 | const getRandomNumber = () => {
10 |     return String.fromCharCode(Math.floor(Math.random() * 10) + 48)
11 | }
12 | 
13 | const getRandomSymbol = () => {
14 |     const symbols = "!@#$%&*"
15 |     return symbols[Math.floor(Math.random() * symbols.length)]
16 | }
17 | 
18 | const randomFunctions = {getRandomLower,getRandomUpper, getRandomNumber, getRandomSymbol}
19 | 
20 | const generatePassword = () =>{
21 |     const length = 20
22 |     let generatePassword = ""
23 |     for(let x = 0; x < length; x++)
24 |     generatePassword += Object.values(randomFunctions)[Math.floor(Math.random() * 4)]()
25 |     return generatePassword
26 | }
27 | 
28 | const spanResult = document.getElementById("result")
29 | const generateButton = document.getElementById("generate")
30 | const clipboardButton = document.getElementById("clipboard")
31 | 
32 | generateButton.addEventListener("click", () => {
33 |     spanResult.innerText = generatePassword()
34 | })
35 | 
36 | clipboardButton.addEventListener("click", () => {
37 |     const password = spanResult.innerText
38 |     if(!password)
39 |         return
40 | 
41 |     const textarea = document.createElement("textarea")
42 |     textarea.value = password
43 |     document.body.appendChild(textarea)
44 |     textarea.select()
45 |     document.execCommand("copy")
46 |     textarea.remove()
47 |     window.alert("Kopyalandı")
48 | })


--------------------------------------------------------------------------------
/Random-Password/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |   <title>Page Title</title>
 7 |   <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |   <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
10 | </head>
11 | <body>
12 | 
13 |   <div class="wrap">
14 |     <h2>Güvenli Parola</h2>
15 |     <div class="result">
16 |       <span id="result"></span>
17 |       <button id="clipboard">
18 |         <i class="far fa-clipboard"></i>
19 |       </button>
20 |     </div>
21 |     <button id="generate" class="btn">Oluştur</button>
22 |   </div>
23 | 
24 |   <script src='app.js'></script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/Random-Password/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body{
 8 |   display: flex;
 9 |   flex-direction: column;
10 |   align-items: center;
11 |   background-color: #f2f2f2;
12 |   color: #333;
13 |   font-family: sans-serif;
14 | }
15 | 
16 | .wrap{
17 |   width: 360px;
18 |   margin-top: 100px;
19 |   padding: 20px;
20 |   background-color: #fff;
21 |   box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .3);
22 |   border-radius: 5px;
23 | }
24 | 
25 | h2{
26 |   font-size: 24px;
27 |   text-align: center;
28 | }
29 | 
30 | .result{
31 |   display: flex;
32 |   flex-direction: row;
33 |   align-items: center;
34 |   justify-content: space-between;
35 |   background-color: #f2f2f2;
36 |   border-radius: 5px;
37 |   margin: 20px 0;
38 | }
39 | 
40 | .result span{
41 |   padding: 0 10px;
42 |   line-height: 50px;
43 |   width: 100%;
44 | }
45 | 
46 | .result button{
47 |   border: 0;
48 |   outline: 0;
49 |   width: 50px;
50 |   height: 50px;
51 |   background-color: #ddd;
52 |   font-size: 16px;
53 |   border-radius: 0 5px 5px 0;
54 |   cursor: pointer;
55 | }
56 | 
57 | .btn{
58 |   border: 0;
59 |   outline: 0;
60 |   width: 100%;
61 |   height: 50px;
62 |   background-color: #b84592;
63 |   color: #fff;
64 |   font-size: 16px;
65 |   font-weight: 700;
66 |   font-family: sans-serif;
67 |   cursor: pointer;
68 | }
69 | 
70 | .btn:hover{
71 |   box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .4);
72 | }
73 | 
74 | #clipboard:hover{
75 |   background-color: #c5c5c5;
76 | }


--------------------------------------------------------------------------------
/Scroll Animasyonu/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Page Title</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 |     
10 | </head>
11 | <body>
12 | 
13 |     <h1>Blog Sayfası</h1>
14 |     <div class="box"><h2>Blog Yazısı</h2></div>
15 |     <div class="box"><h2>Blog Yazısı</h2></div>
16 |     <div class="box"><h2>Blog Yazısı</h2></div>
17 |     <div class="box"><h2>Blog Yazısı</h2></div>
18 |     <div class="box"><h2>Blog Yazısı</h2></div>
19 |     <div class="box"><h2>Blog Yazısı</h2></div>
20 |     <div class="box"><h2>Blog Yazısı</h2></div>
21 |     <div class="box"><h2>Blog Yazısı</h2></div>
22 |     <div class="box"><h2>Blog Yazısı</h2></div>
23 |     <div class="box"><h2>Blog Yazısı</h2></div>
24 |     <div class="box"><h2>Blog Yazısı</h2></div>
25 |     <div class="box"><h2>Blog Yazısı</h2></div>
26 |     <div class="box"><h2>Blog Yazısı</h2></div>
27 |     <div class="box"><h2>Blog Yazısı</h2></div>
28 |     <div class="box"><h2>Blog Yazısı</h2></div>
29 |     <div class="box"><h2>Blog Yazısı</h2></div>
30 |     <div class="box"><h2>Blog Yazısı</h2></div>
31 |     <div class="box"><h2>Blog Yazısı</h2></div>
32 | 
33 |     <script src='main.js'></script>
34 | </body>
35 | </html>


--------------------------------------------------------------------------------
/Scroll Animasyonu/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |     font-family: sans-serif;
 7 |     background-color: #e57128;
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     justify-content: center;
11 |     align-items: center;
12 |     margin: 0;
13 |     overflow-x: hidden;
14 | }
15 | 
16 | h1{
17 |     margin: 10px;
18 |     color: #fff;
19 | }
20 | 
21 | .box{
22 |     background-color: #ffc329;
23 |     display: flex;
24 |     align-items: center;
25 |     justify-content: center;
26 |     width: 400px;
27 |     height: 200px;
28 |     margin: 10px;
29 |     box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
30 |     border: 2px solid #fff;
31 |     transform: translateX(400%);
32 |     transition: transform 0.5s ease;
33 | }
34 | 
35 | .box:nth-last-of-type(even){
36 |     transform: translateX(-400%);
37 | }
38 | 
39 | .box.show{
40 |     transform: translateX(0);
41 | }
42 | 
43 | .box h2{
44 |     font-size: 35px;
45 | }


--------------------------------------------------------------------------------
/Scroll Animasyonu/main.js:
--------------------------------------------------------------------------------
 1 | const boxes = document.querySelectorAll(".box");
 2 | 
 3 | window.addEventListener("scroll", checkBoxes);
 4 | 
 5 | checkBoxes();
 6 | 
 7 | function checkBoxes(){
 8 |     const triggerBotom = (window.innerHeight / 6) *4;
 9 | 
10 |     boxes.forEach(box => {
11 |         const boxTop = box.getBoundingClientRect().top;
12 | 
13 |         if(boxTop < triggerBotom){
14 |             box.classList.add("show");
15 |         }else {
16 |             box.classList.remove("show");
17 |         };
18 |     });
19 | };


--------------------------------------------------------------------------------
/Sesler/app.js:
--------------------------------------------------------------------------------
 1 | const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"];
 2 | 
 3 | sounds.forEach((sound) => {
 4 |     const btn = document.createElement("button")
 5 |     btn.classList.add("btn")
 6 | 
 7 |     btn.innerText = sound;
 8 | 
 9 |     document.getElementById("buttons").appendChild(btn)
10 | })


--------------------------------------------------------------------------------
/Sesler/index.html:
--------------------------------------------------------------------------------
 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 rel="stylesheet" href="style.css" />
 8 |     <title>Sound Stream Deck</title>
 9 |   </head>
10 |   <body>
11 |     <audio id="applause" src="sesler/applause.mp3"></audio>
12 |     <audio id="boo" src="sesler/boo.mp3"></audio>
13 |     <audio id="gasp" src="sesler/gasp.mp3"></audio>
14 |     <audio id="tada" src="sesler/tada.mp3"></audio>
15 |     <audio id="victory" src="sesler/victory.mp3"></audio>
16 |     <audio id="wrong" src="sesler/wrong.mp3"></audio>
17 | 
18 |     <div id="buttons"></div>
19 |     <script src="app.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/Sesler/sesler/applause.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Sesler/sesler/applause.mp3


--------------------------------------------------------------------------------
/Sesler/sesler/boo.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Sesler/sesler/boo.mp3


--------------------------------------------------------------------------------
/Sesler/sesler/gasp.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Sesler/sesler/gasp.mp3


--------------------------------------------------------------------------------
/Sesler/sesler/tada.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Sesler/sesler/tada.mp3


--------------------------------------------------------------------------------
/Sesler/sesler/victory.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Sesler/sesler/victory.mp3


--------------------------------------------------------------------------------
/Sesler/sesler/wrong.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Sesler/sesler/wrong.mp3


--------------------------------------------------------------------------------
/Sesler/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
 2 | 
 3 | * {
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   font-family: 'Inter', sans-serif;
 9 |   background-color: rgba(245, 157, 39, 0.8);
10 |   display: flex;
11 |   flex-wrap: wrap;
12 |   justify-content: center;
13 |   align-items: center;
14 |   text-align: center;
15 |   height: 100vh;
16 |   margin: 0;
17 |   overflow: hidden;
18 | }
19 | 
20 | .btn {
21 |   background-color: rgba(245, 157, 39, 1);
22 |   border: none;
23 |   border-radius: 10px;
24 |   color: #fff;
25 |   font-weight: bold;
26 |   font-size: 16px;
27 |   font-family: inherit;
28 |   margin: 1rem;
29 |   padding: 1.5rem 3rem;
30 |   box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
31 |   text-transform: uppercase;
32 |   cursor: pointer;
33 | }
34 | 
35 | .btn:hover {
36 |   opacity: 0.9;
37 | }
38 | 
39 | .btn:focus {
40 |   outline: none;
41 | }
42 | 


--------------------------------------------------------------------------------
/Sidebar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Sidebar </title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 | </head>
11 | <body>
12 | 
13 |   <button class="sidebar-toggle">
14 |     <i class="fas fa-bars"></i>
15 |   </button>
16 |   <aside class="sidebar">
17 |     <div class="sidebar-header">
18 |       <img src="./logo.svg" alt="Logo">
19 |       <button class="close-btn">
20 |         <i class="fas fa-times"></i>
21 |       </button>
22 |     </div>
23 |     <!-- links -->
24 |     <ul class="links">
25 |       <li>
26 |         <a href="index.html">home</a>
27 |       </li>
28 |       <li>
29 |         <a href="about.html">about</a>
30 |       </li>
31 |       <li>
32 |         <a href="projects.html">projects</a>
33 |       </li>
34 |       <li>
35 |         <a href="contact.html">contact</a>
36 |       </li>
37 |     </ul>
38 |     <!-- social media -->
39 |     <ul class="social-icons">
40 |       <li>
41 |         <a href="https://www.facebook.com">
42 |           <i class="fab fa-facebook"></i>
43 |         </a>
44 |       </li>
45 |       <li>
46 |         <a href="https://www.twitter.com">
47 |           <i class="fab fa-twitter"></i>
48 |         </a>
49 |       </li>
50 |       <li>
51 |         <a href="https://www.behance.com">
52 |           <i class="fab fa-behance"></i>
53 |         </a>
54 |       </li>
55 |       <li>
56 |         <a href="https://www.linkedin.com">
57 |           <i class="fab fa-linkedin"></i>
58 |         </a>
59 |       </li>
60 |       <li>
61 |         <a href="https://www.sketch.com">
62 |           <i class="fab fa-sketch"></i>
63 |         </a>
64 |       </li>
65 |     </ul>
66 |   </aside>
67 | 
68 |    <script src='main.js'></script>
69 | </body>
70 | </html> 


--------------------------------------------------------------------------------
/Sidebar/main.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: hsl(205, 78%, 60%);
 22 |   /* lighter shades of primary color */
 23 |   --clr-primary-6: hsl(205, 89%, 70%);
 24 |   --clr-primary-7: hsl(205, 90%, 76%);
 25 |   --clr-primary-8: hsl(205, 86%, 81%);
 26 |   --clr-primary-9: hsl(205, 90%, 88%);
 27 |   --clr-primary-10: hsl(205, 100%, 96%);
 28 |   /* darkest grey - used for headings */
 29 |   --clr-grey-1: hsl(209, 61%, 16%);
 30 |   --clr-grey-2: hsl(211, 39%, 23%);
 31 |   --clr-grey-3: hsl(209, 34%, 30%);
 32 |   --clr-grey-4: hsl(209, 28%, 39%);
 33 |   /* grey used for paragraphs */
 34 |   --clr-grey-5: hsl(210, 22%, 49%);
 35 |   --clr-grey-6: hsl(209, 23%, 60%);
 36 |   --clr-grey-7: hsl(211, 27%, 70%);
 37 |   --clr-grey-8: hsl(210, 31%, 80%);
 38 |   --clr-grey-9: hsl(212, 33%, 89%);
 39 |   --clr-grey-10: hsl(210, 36%, 96%);
 40 |   --clr-white: #fff;
 41 |   --clr-red-dark: hsl(360, 67%, 44%);
 42 |   --clr-red-light: hsl(360, 71%, 66%);
 43 |   --clr-green-dark: hsl(125, 67%, 44%);
 44 |   --clr-green-light: hsl(125, 71%, 66%);
 45 |   --clr-black: #222;
 46 |   --ff-primary: "Roboto", sans-serif;
 47 |   --ff-secondary: "Open Sans", sans-serif;
 48 |   --transition: all 0.3s linear;
 49 |   --spacing: 0.1rem;
 50 |   --radius: 0.25rem;
 51 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 52 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 53 |   --max-width: 1170px;
 54 |   --fixed-width: 620px;
 55 | }
 56 | /*
 57 | =============== 
 58 | Global Styles
 59 | ===============
 60 | */
 61 | 
 62 | *,
 63 | ::after,
 64 | ::before {
 65 |   margin: 0;
 66 |   padding: 0;
 67 |   box-sizing: border-box;
 68 | }
 69 | body {
 70 |   font-family: var(--ff-secondary);
 71 |   background: var(--clr-grey-10);
 72 |   color: var(--clr-grey-1);
 73 |   line-height: 1.5;
 74 |   font-size: 0.875rem;
 75 | }
 76 | ul {
 77 |   list-style-type: none;
 78 | }
 79 | a {
 80 |   text-decoration: none;
 81 | }
 82 | h1,
 83 | h2,
 84 | h3,
 85 | h4 {
 86 |   letter-spacing: var(--spacing);
 87 |   text-transform: capitalize;
 88 |   line-height: 1.25;
 89 |   margin-bottom: 0.75rem;
 90 |   font-family: var(--ff-primary);
 91 | }
 92 | h1 {
 93 |   font-size: 3rem;
 94 | }
 95 | h2 {
 96 |   font-size: 2rem;
 97 | }
 98 | h3 {
 99 |   font-size: 1.25rem;
100 | }
101 | h4 {
102 |   font-size: 0.875rem;
103 | }
104 | p {
105 |   margin-bottom: 1.25rem;
106 |   color: var(--clr-grey-5);
107 | }
108 | @media screen and (min-width: 800px) {
109 |   h1 {
110 |     font-size: 4rem;
111 |   }
112 |   h2 {
113 |     font-size: 2.5rem;
114 |   }
115 |   h3 {
116 |     font-size: 1.75rem;
117 |   }
118 |   h4 {
119 |     font-size: 1rem;
120 |   }
121 |   body {
122 |     font-size: 1rem;
123 |   }
124 |   h1,
125 |   h2,
126 |   h3,
127 |   h4 {
128 |     line-height: 1;
129 |   }
130 | }
131 | /*  global classes */
132 | 
133 | /* section */
134 | .section {
135 |   padding: 5rem 0;
136 | }
137 | 
138 | .section-center {
139 |   width: 90vw;
140 |   margin: 0 auto;
141 |   max-width: 1170px;
142 | }
143 | @media screen and (min-width: 992px) {
144 |   .section-center {
145 |     width: 95vw;
146 |   }
147 | }
148 | main {
149 |   min-height: 100vh;
150 |   display: grid;
151 |   place-items: center;
152 | }
153 | 
154 | /*
155 | =============== 
156 | Sidebar
157 | ===============
158 | */
159 | .sidebar-toggle {
160 |   position: fixed;
161 |   top: 2rem;
162 |   right: 3rem;
163 |   font-size: 2rem;
164 |   background: transparent;
165 |   border-color: transparent;
166 |   color: var(--clr-primary-5);
167 |   transition: var(--transition);
168 |   cursor: pointer;
169 |   animation: bounce 2s ease-in-out infinite;
170 | }
171 | .sidebar-toggle:hover {
172 |   color: var(--clr-primary-7);
173 | }
174 | @keyframes bounce {
175 |   0% {
176 |     transform: scale(1);
177 |   }
178 |   50% {
179 |     transform: scale(1.5);
180 |   }
181 |   100% {
182 |     transform: scale(1);
183 |   }
184 | }
185 | 
186 | .sidebar-header {
187 |   display: flex;
188 |   justify-content: space-between;
189 |   align-items: center;
190 |   padding: 1rem 1.5rem;
191 | }
192 | .close-btn {
193 |   font-size: 1.75rem;
194 |   background: transparent;
195 |   border-color: transparent;
196 |   color: var(--clr-primary-5);
197 |   transition: var(--transition);
198 |   cursor: pointer;
199 |   color: var(--clr-red-dark);
200 | }
201 | .close-btn:hover {
202 |   color: var(--clr-red-light);
203 |   transform: rotate(360deg);
204 | }
205 | .logo {
206 |   justify-self: center;
207 |   height: 40px;
208 | }
209 | 
210 | .links a {
211 |   display: block;
212 |   font-size: 1.5rem;
213 |   text-transform: capitalize;
214 |   padding: 1rem 1.5rem;
215 |   color: var(--clr-grey-5);
216 |   transition: var(--transition);
217 | }
218 | .links a:hover {
219 |   background: var(--clr-primary-8);
220 |   color: var(--clr-primary-5);
221 |   padding-left: 1.75rem;
222 | }
223 | .social-icons {
224 |   justify-self: center;
225 |   display: flex;
226 |   padding-bottom: 2rem;
227 | }
228 | .social-icons a {
229 |   font-size: 1.5rem;
230 |   margin: 0 0.5rem;
231 |   color: var(--clr-primary-5);
232 |   transition: var(--transition);
233 | }
234 | .social-icons a:hover {
235 |   color: var(--clr-primary-1);
236 | }
237 | 
238 | .sidebar {
239 |   position: fixed;
240 |   top: 0;
241 |   left: 0;
242 |   width: 100%;
243 |   height: 100%;
244 |   background: var(--clr-white);
245 |   display: grid;
246 |   grid-template-rows: auto 1fr auto;
247 |   row-gap: 1rem;
248 |   box-shadow: var(--clr-red-dark);
249 |   transition: var(--transition);
250 |   transform: translate(-100%);
251 | }
252 | .show-sidebar {
253 |   transform: translate(0);
254 | }
255 | @media screen and (min-width: 676px) {
256 |   .sidebar {
257 |     width: 400px;
258 |   }
259 | }


--------------------------------------------------------------------------------
/Sidebar/main.js:
--------------------------------------------------------------------------------
 1 | const toggleBtn = document.querySelector(".sidebar-toggle");
 2 | const closeBtn = document.querySelector(".close-btn");
 3 | const sidebar = document.querySelector(".sidebar");
 4 | 
 5 | toggleBtn.addEventListener("click", function(){
 6 |    // if(sidebar.classList.contains("show-sidebar")){
 7 |    //    sidebar.classList.remove("show-sidebar")
 8 |    // }
 9 |    // else{
10 |    //    sidebar.classList.add("show-sidebar")
11 |    // }
12 |    sidebar.classList.toggle("show-sidebar");
13 | })
14 | 
15 | closeBtn.addEventListener("click", function(){
16 |    sidebar.classList.remove("show-sidebar");
17 | })


--------------------------------------------------------------------------------
/Simple To Do List-2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>To Do List</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
10 |     
11 | </head>
12 | <body>
13 | 
14 |     <header>
15 |         <h1>To Do List</h1>
16 |     </header>
17 | 
18 |     <form>
19 |         <div class="search">
20 |             <input type="text" class="todo-input" placeholder="Add...">
21 |             <button class="todo-button" type="submit">
22 |                 <i class="fas fa-plus-circle"></i>
23 |             </button>
24 |         </div>
25 | 
26 |         <div class="select">
27 |             <select name="todos" class="filter-todo">
28 |                 <option value="all">All</option>
29 |                 <option value="completed">Completed</option>
30 |                 <option value="uncompleted">Uncompleted</option>
31 |             </select>
32 |         </div>
33 |     </form>
34 | 
35 |     <div class="todo-container">
36 |         <ul class="todo-list"></ul>
37 |     </div>
38 | 
39 |     <div class="alert-wrapper">
40 |         <div class="alert-success">
41 |             <div>Ekleme Başarılı.</div>
42 |         </div>
43 |         <div class="alert-warning">
44 |             <div>Input alanı boş geçilemez.</div>
45 |         </div>
46 |     </div>
47 | 
48 |     <script src='main.js'></script>
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/Simple To Do List-2/main.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     box-sizing: border-box;
  5 | }
  6 | 
  7 | body{
  8 |     background: linear-gradient(to right, #360033, #0b8793);
  9 |     font-family: sans-serif;
 10 | }
 11 | 
 12 | header h1{
 13 |     color: #fff;
 14 |     margin: 5rem 0;
 15 |     font-size: 3rem;
 16 | }
 17 | 
 18 | header,form{
 19 |     display: flex;
 20 |     flex-direction: column;
 21 |     align-items: center;
 22 | }
 23 | 
 24 | form{
 25 |     position: relative;
 26 | }
 27 | 
 28 | form .search{
 29 |     display: flex;
 30 | }
 31 | 
 32 | form button, form input{
 33 |     padding: 0.5rem;
 34 |     font-size: 2rem;
 35 |     border: none;
 36 |     background-color: #fff;
 37 |     outline: none;
 38 | }
 39 | 
 40 | form button{
 41 |     color: #fff;
 42 |     background-color: #340436;
 43 |     cursor: pointer;
 44 |     transition: all 0.3s ease;
 45 | }
 46 | 
 47 | form button:hover{
 48 |     background-color: #fff;
 49 |     color: #340436;
 50 | }
 51 | 
 52 | .select{
 53 |     position: relative;
 54 |     margin: 1rem;
 55 |     overflow: hidden;
 56 | 
 57 | }
 58 | 
 59 | select{
 60 |     appearance: none;
 61 |     outline: none;
 62 |     border: none;
 63 |     width: 10rem;
 64 |     padding: 1rem;
 65 |     cursor: pointer;
 66 |     color: #340436;
 67 | }
 68 | 
 69 | .select::after{
 70 |     content: "\25BC";
 71 |     position: absolute;
 72 |     background-color: #340436;
 73 |     color: #fff;
 74 |     top: 0;
 75 |     right: 0;
 76 |     padding: 1rem;
 77 |     cursor: pointer;
 78 |     pointer-events: none;
 79 |     transition: all 0.3s ease;
 80 | }
 81 | 
 82 | .select:hover::after{
 83 |     background-color: #fff;
 84 |     color: #340436;
 85 | }
 86 | 
 87 | .todo-container{
 88 |     display: flex;
 89 |     align-items: center;
 90 |     justify-content: center;
 91 | }
 92 | 
 93 | .todo-list{
 94 |     min-width: 30%;
 95 |     list-style: none;
 96 | }
 97 | 
 98 | .todo{
 99 |     margin: 0.5rem;
100 |     background-color: #fff;
101 |     color: #000;
102 |     font-size: 1.5rem;
103 |     display: flex;
104 |     justify-content: center;
105 |     align-items: center;
106 |     transition: .5s all ease;
107 | }
108 | 
109 | .todo li{
110 |     width: 100%;
111 |     padding: 0 0.5rem;
112 | }
113 | 
114 | .complete-btn, .trash-btn{
115 |     background-color: #960303;
116 |     color: #fff;
117 |     border: none;
118 |     padding: 1rem;
119 |     cursor: pointer;
120 |     font-size: 1rem;
121 | }
122 | 
123 | .complete-btn{
124 |     background-color: #0b8793;
125 | }
126 | 
127 | .fa-check-circle, .fa-minus-circle{
128 |     font-size: 1.5rem;
129 |     pointer-events: none;
130 | }
131 | 
132 | .alert-wrapper{
133 |     position: absolute;
134 |     bottom: 10%;
135 |     right: 0;
136 | }
137 | 
138 | .alert-warning, .alert-success{
139 |     padding: 1rem;
140 |     color: #fff;
141 |     font-weight: bold;
142 |     width: 25rem;
143 |     text-align: center;
144 |     display:none
145 | }
146 | 
147 | .alert-warning{
148 |     background-color: #dc3545;
149 | }
150 | 
151 | .alert-success{
152 |     background-color: #5ebe92;
153 | }
154 | 
155 | .fall{
156 |     transform: translateY(8rem) rotateZ(360deg);
157 |     opacity: 0;
158 | }
159 | 
160 | .completed{
161 |     opacity: 0.5;
162 |     text-decoration: line-through;
163 | }


--------------------------------------------------------------------------------
/Simple To Do List-2/main.js:
--------------------------------------------------------------------------------
  1 | //! selectors
  2 | const todoInput = document.querySelector(".todo-input");
  3 | const todoButton = document.querySelector(".todo-button");
  4 | const todoList = document.querySelector(".todo-list");
  5 | const todoFilter = document.querySelector(".filter-todo");
  6 | 
  7 | //? alerts
  8 | const alertWarning = document.querySelector(".alert-warning");
  9 | const alertSuccess = document.querySelector(".alert-success");
 10 | 
 11 | 
 12 | //! events 
 13 | document.addEventListener("DOMContentLoaded", function () {
 14 |     getTodos();
 15 | });
 16 | todoButton.addEventListener("click", addTodo);
 17 | todoList.addEventListener("click", deleteCheck)
 18 | todoFilter.addEventListener("click", filterTodo)
 19 | 
 20 | 
 21 | 
 22 | //! functions
 23 | function addTodo(e) {
 24 | 
 25 |     e.preventDefault();
 26 | 
 27 |     const isEmpty = str => !str.trim().length;
 28 | 
 29 |     if (isEmpty(todoInput.value)) {
 30 |         alertWarning.style.display = "block";
 31 |         setTimeout(() => {
 32 |             alertWarning.style.display = "none";
 33 |         }, 1500);
 34 | 
 35 |         //? clear todo input value
 36 |         todoInput.value = "";
 37 |     } else {
 38 |         alertSuccess.style.display = "block";
 39 |         setTimeout(() => {
 40 |             alertSuccess.style.display = "none";
 41 |         }, 1500);
 42 | 
 43 |         saveLocalTodos(todoInput.value);
 44 | 
 45 |         //? create todo div
 46 |         const todoDIv = document.createElement("div");
 47 |         todoDIv.classList.add("todo");
 48 | 
 49 |         //? check mark button
 50 |         const completedButton = document.createElement("button");
 51 |         completedButton.innerHTML = "<i class='fas fa-check-circle'></i>";
 52 |         completedButton.classList.add("complete-btn");
 53 |         todoDIv.appendChild(completedButton);
 54 | 
 55 |         //? create todo li
 56 |         const newTodo = document.createElement("li");
 57 |         newTodo.innerText = todoInput.value;
 58 |         newTodo.classList.add("todo-item");
 59 |         todoDIv.appendChild(newTodo);
 60 | 
 61 |         //? check trash button
 62 |         const trashButton = document.createElement("button");
 63 |         trashButton.innerHTML = "<i class='fa fa-minus-circle'></i>";
 64 |         trashButton.classList.add("trash-btn");
 65 |         todoDIv.appendChild(trashButton);
 66 | 
 67 |         //? append to list 
 68 |         todoList.appendChild(todoDIv);
 69 | 
 70 |         //? clear todo input value
 71 |         todoInput.value = "";
 72 |     }
 73 | 
 74 | 
 75 | 
 76 | }
 77 | 
 78 | function deleteCheck(e) {
 79 |     const item = e.target;
 80 | 
 81 |     //? delete todo
 82 |     if (item.classList[0] === "trash-btn") {
 83 |         const todo = item.parentElement;
 84 |         todo.classList.add("fall");
 85 |         removeLocaleStorage(todo)
 86 |         todo.addEventListener("transitionend", function () {
 87 |             todo.remove();
 88 |         })
 89 |     }
 90 | 
 91 |     //? check mark
 92 |     if (item.classList[0] === "complete-btn") {
 93 |         const todo = item.parentElement;
 94 |         todo.classList.toggle("completed")
 95 |     }
 96 | }
 97 | 
 98 | function filterTodo(e) {
 99 |     const todos = todoList.childNodes;
100 |     todos.forEach(function (item) {
101 |         switch (e.target.value) {
102 |             case "all":
103 |                 item.style.display = "flex";
104 |                 break;
105 |             case "completed":
106 |                 if (item.classList.contains("completed")) {
107 |                     item.style.display = "flex";
108 |                 } else {
109 |                     item.style.display = "none";
110 |                 }
111 |                 break;
112 |             case "uncompleted":
113 |                 if (!item.classList.contains("completed")) {
114 |                     item.style.display = "flex";
115 |                 } else {
116 |                     item.style.display = "none";
117 |                 }
118 |                 break;
119 |         }
120 |     })
121 | }
122 | 
123 | 
124 | //! locale Storage
125 | function saveLocalTodos(todo) {
126 |     let todos;
127 |     if (localStorage.getItem("todos") === null) {
128 |         todos = [];
129 |     } else {
130 |         todos = JSON.parse(localStorage.getItem("todos"));
131 |     }
132 | 
133 |     todos.push(todo);
134 |     localStorage.setItem("todos", JSON.stringify(todos))
135 | }
136 | 
137 | function getTodos() {
138 |     let todos;
139 |     if (localStorage.getItem("todos") === null) {
140 |         todos = [];
141 |     } else {
142 |         todos = JSON.parse(localStorage.getItem("todos"));
143 |     }
144 | 
145 |     todos.forEach((todo) => {
146 |         //? create todo div
147 |         const todoDIv = document.createElement("div");
148 |         todoDIv.classList.add("todo");
149 | 
150 |         //? check mark button
151 |         const completedButton = document.createElement("button");
152 |         completedButton.innerHTML = "<i class='fas fa-check-circle'></i>";
153 |         completedButton.classList.add("complete-btn");
154 |         todoDIv.appendChild(completedButton);
155 | 
156 |         //? create todo li
157 |         const newTodo = document.createElement("li");
158 |         newTodo.innerText = todo;
159 |         newTodo.classList.add("todo-item");
160 |         todoDIv.appendChild(newTodo);
161 | 
162 |         //? check trash button
163 |         const trashButton = document.createElement("button");
164 |         trashButton.innerHTML = "<i class='fa fa-minus-circle'></i>";
165 |         trashButton.classList.add("trash-btn");
166 |         todoDIv.appendChild(trashButton);
167 | 
168 |         //? append to list 
169 |         todoList.appendChild(todoDIv);
170 |     });
171 | }
172 | 
173 | 
174 | 
175 | function removeLocaleStorage(todo) {
176 |     let todos;
177 |     if (localStorage.getItem("todos") === null) {
178 |         todos = [];
179 |     } else {
180 |         todos = JSON.parse(localStorage.getItem("todos"));
181 |     }
182 |     const todoIndex = todo.children[1].innerText;
183 |     todos.splice(todos.indexOf(todoIndex), 1);
184 |     localStorage.setItem("todos", JSON.stringify(todos));
185 | }


--------------------------------------------------------------------------------
/Slider/app.js:
--------------------------------------------------------------------------------
 1 | const slides = document.querySelectorAll(".slide");
 2 | const next = document.getElementById("next");
 3 | const prev = document.getElementById("prev");
 4 | const auto = true;
 5 | const intervalTime = 3000;
 6 | let slideİnterval;
 7 | 
 8 | const nextSlide = () => {
 9 |     const activeSlide = document.querySelector(".active");
10 |     activeSlide.classList.remove("active");
11 | 
12 |     if(activeSlide.nextElementSibling){
13 |         activeSlide.nextElementSibling.classList.add("active");
14 |     }else{
15 |         slides[0].classList.add("active");
16 |     }
17 | }
18 | 
19 | const prevSlide = () => {
20 |     const activeSlide = document.querySelector(".active");
21 |     activeSlide.classList.remove("active");
22 | 
23 |     if(activeSlide.previousElementSibling){
24 |         activeSlide.previousElementSibling.classList.add("active");
25 |     }else{
26 |         slides[slides.length - 1].classList.add("active");
27 |     }
28 | }
29 | 
30 | next.addEventListener("click",() => {
31 |     nextSlide();
32 |     if(auto){
33 |         clearInterval(slideİnterval);
34 |         slideİnterval = setInterval(nextSlide, intervalTime)
35 |     }
36 | });
37 | 
38 | prev.addEventListener("click",() => {
39 |     prevSlide();
40 |     if(auto){
41 |         clearInterval(slideİnterval);
42 |         slideİnterval = setInterval(nextSlide, intervalTime)
43 |     }
44 | });
45 | 
46 | if(auto){
47 |     slideİnterval = setInterval(nextSlide, intervalTime)
48 | }


--------------------------------------------------------------------------------
/Slider/image/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Slider/image/1.jpg


--------------------------------------------------------------------------------
/Slider/image/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Slider/image/1.png


--------------------------------------------------------------------------------
/Slider/image/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Slider/image/2.jpg


--------------------------------------------------------------------------------
/Slider/image/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Slider/image/2.png


--------------------------------------------------------------------------------
/Slider/image/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Slider/image/3.jpg


--------------------------------------------------------------------------------
/Slider/image/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Slider/image/3.png


--------------------------------------------------------------------------------
/Slider/image/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Slider/image/4.jpg


--------------------------------------------------------------------------------
/Slider/image/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Slider/image/5.png


--------------------------------------------------------------------------------
/Slider/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |   <title>Slider</title>
 7 |   <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 9 |   <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
10 | </head>
11 | <body>
12 | 
13 |   <div class="slider">
14 |     <div class="slide active">
15 |       <div class="inner">
16 |         <h1>Slide basligi 1</h1>
17 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, voluptas voluptatum. Rerum necessitatibus natus vitae ea saepe consequatur reprehenderit quasi ducimus modi incidunt laborum corporis animi, architecto fuga minima quis.</p>
18 |       </div>
19 |     </div>
20 |     <div class="slide">
21 |       <div class="inner">
22 |         <h1>Slide basligi 2</h1>
23 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, voluptas voluptatum. Rerum necessitatibus natus vitae ea saepe consequatur reprehenderit quasi ducimus modi incidunt laborum corporis animi, architecto fuga minima quis.</p>
24 |       </div>
25 |     </div>
26 |     <div class="slide">
27 |       <div class="inner">
28 |         <h1>Slide basligi 3</h1>
29 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, voluptas voluptatum. Rerum necessitatibus natus vitae ea saepe consequatur reprehenderit quasi ducimus modi incidunt laborum corporis animi, architecto fuga minima quis.</p>
30 |       </div>
31 |     </div>
32 |     <div class="slide">
33 |       <div class="inner">
34 |         <h1>Slide basligi 4</h1>
35 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, voluptas voluptatum. Rerum necessitatibus natus vitae ea saepe consequatur reprehenderit quasi ducimus modi incidunt laborum corporis animi, architecto fuga minima quis.</p>
36 |       </div>
37 |     </div>
38 |     <div class="slide">
39 |       <div class="inner">
40 |         <h1>Slide basligi 5</h1>
41 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, voluptas voluptatum. Rerum necessitatibus natus vitae ea saepe consequatur reprehenderit quasi ducimus modi incidunt laborum corporis animi, architecto fuga minima quis.</p>
42 |       </div>
43 |     </div>
44 |   </div>
45 | 
46 |   <div class="indicators">
47 |     <button id="prev"><i class="fas fa-angle-left"></i></button>
48 |     <button id="next"><i class="fas fa-angle-right"></i></button>
49 |   </div>
50 | 
51 | <script src='app.js'></script>
52 | </body>
53 | </html>


--------------------------------------------------------------------------------
/Slider/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |     font-family: sans-serif;
 7 |     display: flex;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |     height: 100vh;
11 |     margin: 0;
12 | }
13 | 
14 | img{
15 |     width: 600px;
16 |     height: 350px;
17 | }
18 | 
19 | .carousel{
20 |     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 5px;
21 |     height: 380px;
22 |     width: 600px;
23 |     overflow: hidden;
24 |     border: 3px solid #656d4a;
25 |     border-bottom: none;
26 |     border-radius: 5px 5px 0 0;
27 | }
28 | 
29 | .image-container{
30 |     display: flex;
31 |     transform: translateX(0px);
32 |     transition: transform 0.5s ease-in-out;
33 | }
34 | 
35 | .buttons-container{
36 |     display: flex;
37 |     justify-content: space-between;
38 | }
39 | 
40 | .button{
41 |     width: 49.5%;
42 |     border: none;
43 |     background-color: #656d4a;
44 |     color: white;
45 |     padding: 0.5rem;
46 |     cursor: pointer;
47 | }
48 | 
49 | .button:hover{
50 |     opacity: 0.9;
51 | }
52 | 
53 | .button:focus{
54 |     outline: none;
55 | }


--------------------------------------------------------------------------------
/Slider/main.js:
--------------------------------------------------------------------------------
 1 | const imgsContainer = document.getElementById('images')
 2 | const img = document.querySelectorAll('#images img')
 3 | const nextBtn = document.getElementById('next')
 4 | const prevBtn = document.getElementById('prev')
 5 | 
 6 | let interval = setInterval(play, 2000)
 7 | let idx = 0
 8 | //console.log(img)
 9 | 
10 | function play() {
11 |   idx++
12 |   changeImage()
13 | }
14 | 
15 | function changeImage() {
16 |   if (idx > img.length - 1) {
17 |     idx = 0
18 |   } else if (idx < 0) {
19 |     idx = img.length - 1
20 |   }
21 |   imgsContainer.style.transform = `translateX(${-idx * 600}px)`
22 | }
23 | 
24 | nextBtn.addEventListener('click', () => {
25 |   idx++
26 |   changeImage()
27 |   resetInterval()
28 | })
29 | 
30 | prevBtn.addEventListener('click', () => {
31 |   idx--
32 |   changeImage()
33 |   resetInterval()
34 | })
35 | 
36 | function resetInterval() {
37 |   clearInterval(interval)
38 |   interval = setInterval(play, 2000)
39 | }


--------------------------------------------------------------------------------
/Slider/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body{
 8 |   font-family: sans-serif;
 9 | }
10 | 
11 | button:focus{
12 |   outline: 0;
13 | }
14 | 
15 | .slider{
16 |   position: relative;
17 |   width: 100vw;
18 |   height: 100vh;
19 |   overflow: hidden;
20 | }
21 | 
22 | .slide{
23 |   position: absolute;
24 |   top: 0;
25 |   left: 0;
26 |   width: 100%;
27 |   height: 100%;
28 |   opacity: 0;
29 |   transition: opacity .4s linear;
30 | }
31 | 
32 | .active{
33 |   opacity: 1;
34 | }
35 | 
36 | .slide .inner{
37 |   position: absolute;
38 |   bottom: 50px;
39 |   left: 50px;
40 |   background-color: rgba(0, 0, 0, .7);
41 |   color: #eee;
42 |   padding: 40px 30px;
43 |   opacity: 0;
44 | }
45 | 
46 | .slide.active .inner{
47 |   opacity: 1;
48 | }
49 | 
50 | .slide:nth-child(1){
51 |   background: url("./image/1.png") no-repeat center/cover;
52 | }
53 | 
54 | .slide:nth-child(2){
55 |   background: url("./image/2.png") no-repeat center/cover;
56 | }
57 | 
58 | .slide:nth-child(3){
59 |   background: url("./image/3.png") no-repeat center/cover;
60 | }
61 | 
62 | .slide:nth-child(4){
63 |   background: url("./image/4.jpg") no-repeat center/cover;
64 | }
65 | 
66 | .slide:nth-child(5){
67 |   background: url("./image/5.png") no-repeat center/cover;
68 | }
69 | 
70 | 
71 | .indicators{
72 |   position: absolute;
73 |   bottom: 20px;
74 |   right: 20px;
75 |   cursor: default;
76 | }
77 | 
78 | .indicators button{
79 |   padding: 10px 20px;
80 |   font-size: 25px;
81 |   background-color: rgba(0, 0, 0, .7);
82 |   color: #eee;
83 |   border: 0;
84 |   cursor: pointer;
85 | }


--------------------------------------------------------------------------------
/Stick_Navbar/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Site</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <nav class="nav">
13 |         <div class="container">
14 |             <h1 class="logo">
15 |                 <a href="index.html">$</a>
16 |             </h1>
17 |             <ul>
18 |                 <li><a href="#">About me</a></li>
19 |                 <li><a href="#">Skills</a></li>
20 |                 <li><a href="#">Projects</a></li>
21 |                 <li><a href="#">Experience</a></li>
22 |             </ul>
23 |         </div>
24 |     </nav>
25 | 
26 |     <div class="hero">
27 |         <div class="container">
28 |             <h1>Hi there, I am Tugrul</h1>
29 |             <p>Iam a frontend developer</p>
30 |         </div>
31 |     </div>
32 | 
33 |     <section class="container content">
34 |         <h2>Content One</h2>
35 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dolores, sit voluptatibus quo maiores impedit praesentium vero natus temporibus delectus quaerat quisquam a error eligendi recusandae possimus deleniti officia libero.
36 |         </p>
37 |         <h2>Content One</h2>
38 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dolores, sit voluptatibus quo maiores impedit praesentium vero natus temporibus delectus quaerat quisquam a error eligendi recusandae possimus deleniti officia libero.
39 |         </p>
40 |         <h2>Content One</h2>
41 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae dolores, sit voluptatibus quo maiores impedit praesentium vero natus temporibus delectus quaerat quisquam a error eligendi recusandae possimus deleniti officia libero.
42 |         </p>
43 |     </section>
44 | 
45 |     <script src='main.js'></script>
46 | </body>
47 | </html>


--------------------------------------------------------------------------------
/Stick_Navbar/main.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | body {
 10 |   font-family: 'Space Grotesk', sans-serif;
 11 |   color: #222;
 12 | }
 13 | 
 14 | .container {
 15 |   max-width: 1200px;
 16 |   margin: 0 auto;
 17 | }
 18 | 
 19 | .nav {
 20 |   position: fixed;
 21 |   background-color: #5a4645;
 22 |   top: 0;
 23 |   right: 0;
 24 |   left: 0;
 25 |   transition: all 0.5s ease-in-out;
 26 | }
 27 | 
 28 | .nav .container {
 29 |   padding: 1.5rem 0;
 30 |   display: flex;
 31 |   justify-content: space-between;
 32 |   align-items: center;
 33 |   transition: all 0.5s ease-in-out;
 34 | }
 35 | 
 36 | .nav ul {
 37 |   list-style-type: none;
 38 |   display: flex;
 39 |   align-items: center;
 40 |   justify-content: center;
 41 | }
 42 | 
 43 | .nav a {
 44 |   color: #fff;
 45 |   text-decoration: none;
 46 |   padding: 0 15px;
 47 |   transition: all 0.5s ease-in-out;
 48 | }
 49 | 
 50 | .nav .current {
 51 |   color: #5eaa3f;
 52 |   font-weight: bold;
 53 | }
 54 | 
 55 | .nav.move {
 56 |   background-color: tomato;
 57 |   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 58 | }
 59 | 
 60 | .nav.move .container {
 61 |   padding: 1rem 0;
 62 | }
 63 | 
 64 | .nav.move .current {
 65 |   color: #5a4645;
 66 |   font-weight: bold;
 67 | }
 68 | 
 69 | .hero {
 70 |   background-image: url('https://img.freepik.com/free-vector/retro-devices-isometric-composition-with-personal-computer-consisting-from-system-unit-monitor-keyboard-attached-joystick_1284-61168.jpg?w=2000');
 71 |   height: 100vh;
 72 |   background-position: bottom center;
 73 |   background-repeat: no-repeat;
 74 |   background-size: cover;
 75 |   color: #fff;
 76 |   display: flex;
 77 |   justify-content: center;
 78 |   align-items: center;
 79 |   text-align: center;
 80 |   margin-bottom: 1rem;
 81 |   position: relative;
 82 |   z-index: -2;
 83 | }
 84 | 
 85 | .hero::before {
 86 |   content: '';
 87 |   position: absolute;
 88 |   top: 0;
 89 |   left: 0;
 90 |   width: 100%;
 91 |   height: 100%;
 92 |   background-color: rgba(0, 0, 0, 0.5);
 93 |   z-index: -1;
 94 | }
 95 | 
 96 | .hero h1 {
 97 |   font-size: 2.6rem;
 98 |   margin: -1rem 1rem 1rem;
 99 |   border-bottom: 1px solid #fff;
100 | }
101 | 
102 | .hero p {
103 |   font-size: 1.3rem;
104 |   letter-spacing: 1px;
105 | }
106 | 
107 | .content {
108 |   padding: 1rem;
109 | }
110 | 
111 | .content h2 {
112 |   font-size: 150%;
113 |   margin: 2rem 0;
114 | }
115 | 
116 | .content p {
117 |   color: #555;
118 |   line-height: 2rem;
119 |   letter-spacing: 1px;
120 | }
121 | 
122 | @media (max-width: 480px) {
123 |   .logo {
124 |     display: none;
125 |   }
126 | }


--------------------------------------------------------------------------------
/Stick_Navbar/main.js:
--------------------------------------------------------------------------------
 1 | const nav = document.querySelector('.nav')
 2 | 
 3 | const add = 150
 4 | 
 5 | window.addEventListener('scroll', () => {
 6 |   //console.log(window.scrollY, nav.offsetHeight)
 7 | 
 8 |   if (window.scrollY > nav.offsetHeight + add) {
 9 |     nav.classList.add('move')
10 |   } else {
11 |     nav.classList.remove('move')
12 |   }
13 | })


--------------------------------------------------------------------------------
/Surukle_Birak/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>Drag n Drop</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="empty">
13 |         <div class="fill" draggable="true"></div>
14 |     </div>
15 |     <div class="empty"></div>
16 |     <div class="empty"></div>
17 |     <div class="empty"></div>
18 |     <div class="empty"></div>
19 | 
20 |     <script src='main.js'></script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/Surukle_Birak/main.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | body{
 6 |     background-color: #eee;
 7 |     display: flex;
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 100vh;
11 |     margin: 0;
12 | }
13 | 
14 | .empty{
15 |     width: 150px;
16 |     height: 150px;
17 |     border: solid 3px #333;
18 |     margin: 10px;
19 |     background-color: white;
20 | }
21 | 
22 | .fill{
23 |     background-image: url("https://source.unsplash.com/random/ 150x150;");
24 |     width: 145px;
25 |     height: 145px;
26 |     cursor: pointer;
27 | }
28 | 
29 | .hold{
30 |     border: solid 5px #eee;
31 | }
32 | 
33 | .hover{
34 |     background-color: #333;
35 |     border-style: dashed;
36 |     border-color: #fff;
37 | }
38 | 
39 | @media(max-width: 800px){
40 |     body{
41 |         flex-direction: column;
42 |     }
43 | }


--------------------------------------------------------------------------------
/Surukle_Birak/main.js:
--------------------------------------------------------------------------------
 1 | const fill = document.querySelector('.fill')
 2 | const empties = document.querySelectorAll('.empty')
 3 | 
 4 | fill.addEventListener('dragstart', dragStart)
 5 | function dragStart() {
 6 |   //console.log('dragStart')
 7 |   this.className += ' hold'
 8 |   setTimeout(() => (this.className = 'invisible'), 0)
 9 | }
10 | 
11 | fill.addEventListener('dragend', dragEnd)
12 | function dragEnd() {
13 |   //console.log('dragEnd')
14 |   this.className = 'fill'
15 | }
16 | 
17 | for (const empty of empties) {
18 |   empty.addEventListener('dragover', dragOver)
19 |   empty.addEventListener('dragenter', dragEnter)
20 |   empty.addEventListener('dragleave', dragleave)
21 |   empty.addEventListener('drop', dragDrop)
22 | }
23 | 
24 | function dragOver(e) {
25 |   //console.log('dragOver')
26 |   e.preventDefault()
27 | }
28 | 
29 | function dragEnter(e) {
30 |   //console.log('dragEnter')
31 |   e.preventDefault()
32 |   this.className += ' hover'
33 | }
34 | 
35 | function dragleave() {
36 |   //console.log('dragleave')
37 |   this.className = 'empty'
38 | }
39 | 
40 | function dragDrop() {
41 |   //console.log('dragDrop')
42 |   this.className = 'empty'
43 |   this.append(fill)
44 | }


--------------------------------------------------------------------------------
/Tabs/hero-bcg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Tabs/hero-bcg.jpeg


--------------------------------------------------------------------------------
/Tabs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Tabs</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |   <section class="section">
13 |     <div class="title">
14 |       <h2>about</h2>
15 |       <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic quam molestias quaerat quo porro deleniti optio quod voluptate, et at obcaecati eaque sit eos quis, recusandae blanditiis, necessitatibus nam debitis.</p>
16 |     </div>
17 |     <div class="about-center section-center">
18 |       <article class="about-img">
19 |         <img src="./hero-bcg.jpeg" alt="about picture">
20 |       </article>
21 |       <article class="about">
22 |         <div class="btn-container">
23 |           <button class="tab-btn active" data-id="history">history</button>
24 |           <button class="tab-btn" data-id="vision">vision</button>
25 |           <button class="tab-btn" data-id="goals">goals</button>
26 |         </div>
27 |         <article class="about-content">
28 |           <div class="content active" id="history">
29 |             <h4>history</h4>
30 |             <p>
31 |               I'm baby wolf pickled schlitz try-hard normcore marfa man bun mumblecore vice
32 |               pop-up XOXO lomo kombucha glossier bicycle rights. Umami kinfolk salvia jean
33 |               shorts offal venmo. Knausgaard tilde try-hard, woke fixie banjo man bun. Small
34 |               batch tumeric mustache tbh wayfarers 8-bit shaman chartreuse tacos. Viral
35 |               direct trade hoodie ugh chambray, craft beer pork belly flannel tacos
36 |               single-origin coffee art party migas plaid pop-up.
37 |             </p>
38 |           </div>
39 |           <div class="content" id="vision">
40 |             <h4>vision</h4>
41 |             <p>
42 |               Man bun PBR&B keytar copper mug prism, hell of helvetica. Synth crucifix offal
43 |               deep v hella biodiesel. Church-key listicle polaroid put a bird on it
44 |               chillwave palo santo enamel pin, tattooed meggings franzen la croix cray.
45 |               Retro yr aesthetic four loko tbh helvetica air plant, neutra palo santo tofu
46 |               mumblecore. Hoodie bushwick pour-over jean shorts chartreuse shabby chic. Roof
47 |               party hammock master cleanse pop-up truffaut, bicycle rights skateboard
48 |               affogato readymade sustainable deep v live-edge schlitz narwhal.
49 |             </p>
50 |             <ul>
51 |               <li>list item</li>
52 |               <li>list item</li>
53 |               <li>list item</li>
54 |             </ul>
55 |           </div>
56 |           <div class="content" id="goals">
57 |             <h4>goals</h4>
58 |             <p>
59 |               Chambray authentic truffaut, kickstarter brunch taxidermy vape heirloom four
60 |               dollar toast raclette shoreditch church-key. Poutine etsy tote bag, cred
61 |               fingerstache leggings cornhole everyday carry blog gastropub. Brunch biodiesel
62 |               sartorial mlkshk swag, mixtape hashtag marfa readymade direct trade man braid
63 |               cold-pressed roof party. Small batch adaptogen coloring book heirloom.
64 |               Letterpress food truck hammock literally hell of wolf beard adaptogen everyday
65 |               carry. Dreamcatcher pitchfork yuccie, banh mi salvia venmo photo booth quinoa
66 |               chicharrones.
67 |             </p>            
68 |           </div>
69 |         </article>
70 |       </article>
71 | 
72 |     </div>
73 |   </section>
74 | 
75 |    <script src='main.js'></script>
76 | </body>
77 | </html> 


--------------------------------------------------------------------------------
/Tabs/main.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: #49a6e9;
 22 |   /* lighter shades of primary color */
 23 |   --clr-primary-6: hsl(205, 89%, 70%);
 24 |   --clr-primary-7: hsl(205, 90%, 76%);
 25 |   --clr-primary-8: hsl(205, 86%, 81%);
 26 |   --clr-primary-9: hsl(205, 90%, 88%);
 27 |   --clr-primary-10: hsl(205, 100%, 96%);
 28 |   /* darkest grey - used for headings */
 29 |   --clr-grey-1: hsl(209, 61%, 16%);
 30 |   --clr-grey-2: hsl(211, 39%, 23%);
 31 |   --clr-grey-3: hsl(209, 34%, 30%);
 32 |   --clr-grey-4: hsl(209, 28%, 39%);
 33 |   /* grey used for paragraphs */
 34 |   --clr-grey-5: hsl(210, 22%, 49%);
 35 |   --clr-grey-6: hsl(209, 23%, 60%);
 36 |   --clr-grey-7: hsl(211, 27%, 70%);
 37 |   --clr-grey-8: hsl(210, 31%, 80%);
 38 |   --clr-grey-9: hsl(212, 33%, 89%);
 39 |   --clr-grey-10: hsl(210, 36%, 96%);
 40 |   --clr-white: #fff;
 41 |   --clr-red-dark: hsl(360, 67%, 44%);
 42 |   --clr-red-light: hsl(360, 71%, 66%);
 43 |   --clr-green-dark: hsl(125, 67%, 44%);
 44 |   --clr-green-light: hsl(125, 71%, 66%);
 45 |   --clr-black: #222;
 46 |   --ff-primary: "Roboto", sans-serif;
 47 |   --ff-secondary: "Open Sans", sans-serif;
 48 |   --transition: all 0.3s linear;
 49 |   --spacing: 0.25rem;
 50 |   --radius: 0.5rem;
 51 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 52 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 53 |   --max-width: 1170px;
 54 |   --fixed-width: 620px;
 55 | }
 56 | /*
 57 | =============== 
 58 | Global Styles
 59 | ===============
 60 | */
 61 | 
 62 | *,
 63 | ::after,
 64 | ::before {
 65 |   margin: 0;
 66 |   padding: 0;
 67 |   box-sizing: border-box;
 68 | }
 69 | body {
 70 |   font-family: var(--ff-secondary);
 71 |   background: var(--clr-grey-10);
 72 |   color: var(--clr-grey-1);
 73 |   line-height: 1.5;
 74 |   font-size: 0.875rem;
 75 | }
 76 | ul {
 77 |   list-style-type: none;
 78 | }
 79 | a {
 80 |   text-decoration: none;
 81 | }
 82 | img:not(.logo) {
 83 |   width: 100%;
 84 | }
 85 | img {
 86 |   display: block;
 87 | }
 88 | 
 89 | h1,
 90 | h2,
 91 | h3,
 92 | h4 {
 93 |   letter-spacing: var(--spacing);
 94 |   text-transform: capitalize;
 95 |   line-height: 1.25;
 96 |   margin-bottom: 0.75rem;
 97 |   font-family: var(--ff-primary);
 98 | }
 99 | h1 {
100 |   font-size: 3rem;
101 | }
102 | h2 {
103 |   font-size: 2rem;
104 | }
105 | h3 {
106 |   font-size: 1.25rem;
107 | }
108 | h4 {
109 |   font-size: 0.875rem;
110 | }
111 | p {
112 |   margin-bottom: 1.25rem;
113 |   color: var(--clr-grey-5);
114 | }
115 | @media screen and (min-width: 800px) {
116 |   h1 {
117 |     font-size: 4rem;
118 |   }
119 |   h2 {
120 |     font-size: 2.5rem;
121 |   }
122 |   h3 {
123 |     font-size: 1.75rem;
124 |   }
125 |   h4 {
126 |     font-size: 1rem;
127 |   }
128 |   body {
129 |     font-size: 1rem;
130 |   }
131 |   h1,
132 |   h2,
133 |   h3,
134 |   h4 {
135 |     line-height: 1;
136 |   }
137 | }
138 | /*  global classes */
139 | 
140 | .btn {
141 |   text-transform: uppercase;
142 |   background: transparent;
143 |   color: var(--clr-black);
144 |   padding: 0.375rem 0.75rem;
145 |   letter-spacing: var(--spacing);
146 |   display: inline-block;
147 |   transition: var(--transition);
148 |   font-size: 0.875rem;
149 |   border: 2px solid var(--clr-black);
150 |   cursor: pointer;
151 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
152 |   border-radius: var(--radius);
153 | }
154 | .btn:hover {
155 |   color: var(--clr-white);
156 |   background: var(--clr-black);
157 | }
158 | /* section */
159 | .section {
160 |   padding: 5rem 0;
161 | }
162 | 
163 | .section-center {
164 |   width: 90vw;
165 |   margin: 0 auto;
166 |   max-width: 1170px;
167 | }
168 | @media screen and (min-width: 992px) {
169 |   .section-center {
170 |     width: 95vw;
171 |   }
172 | }
173 | main {
174 |   min-height: 100vh;
175 |   display: grid;
176 |   place-items: center;
177 | }
178 | /*
179 | =============== 
180 | About
181 | ===============
182 | */
183 | .title {
184 |   text-align: center;
185 |   margin-bottom: 4rem;
186 | }
187 | .title p {
188 |   width: 80%;
189 |   margin: 0 auto;
190 | }
191 | 
192 | .about-img {
193 |   margin-bottom: 2rem;
194 | }
195 | .about-img img {
196 |   border-radius: var(--radius);
197 |   object-fit: cover;
198 |   height: 20rem;
199 | }
200 | @media screen and (min-width: 992px) {
201 |   .about-img {
202 |     margin-bottom: 0;
203 |   }
204 | 
205 |   .about-center {
206 |     display: grid;
207 |     grid-template-columns: 1fr 1fr;
208 |     column-gap: 2rem;
209 |   }
210 | }
211 | .about {
212 |   background: var(--clr-white);
213 |   border-radius: var(--radius);
214 |   display: grid;
215 |   grid-template-rows: auto 1fr;
216 | }
217 | .btn-container {
218 |   border-top-left-radius: var(--radius);
219 |   border-top-right-radius: var(--radius);
220 |   display: grid;
221 |   grid-template-columns: 1fr 1fr 1fr;
222 | }
223 | .tab-btn:nth-child(1) {
224 |   border-top-left-radius: var(--radius);
225 | }
226 | .tab-btn:nth-child(3) {
227 |   border-top-right-radius: var(--radius);
228 | }
229 | .tab-btn {
230 |   padding: 1rem 0;
231 |   border: none;
232 |   text-transform: capitalize;
233 |   font-size: 1rem;
234 |   display: block;
235 |   background: var(--clr-grey-9);
236 |   cursor: pointer;
237 |   transition: var(--transition);
238 |   letter-spacing: var(--spacing);
239 | }
240 | .tab-btn:hover:not(.active) {
241 |   background: var(--clr-primary-10);
242 |   color: var(--clr-primary-5);
243 | }
244 | .about-content {
245 |   border-bottom-left-radius: var(--radius);
246 |   border-bottom-right-radius: var(--radius);
247 |   padding: 2rem 1.5rem;
248 | }
249 | /* hide content */
250 | .content {
251 |   display: none;
252 | }
253 | .tab-btn.active {
254 |   background: var(--clr-white);
255 | }
256 | .content.active {
257 |   display: block;
258 | }
259 | 


--------------------------------------------------------------------------------
/Tabs/main.js:
--------------------------------------------------------------------------------
 1 | const btns = document.querySelectorAll(".tab-btn");
 2 | const about = document.querySelector(".about");
 3 | const articles = document.querySelectorAll(".content");
 4 | 
 5 | about.addEventListener("click", function(e){
 6 |   const id = e.target.dataset.id;
 7 |   if(id){
 8 |     btns.forEach(function(btn){
 9 |       btn.classList.remove("active");
10 |       e.target.classList.add("active");
11 |     });
12 |     articles.forEach(function(article){
13 |       article.classList.remove("active");
14 |     });
15 |     const element = document.getElementById(id);
16 |     element.classList.add("active");
17 |   }
18 | });


--------------------------------------------------------------------------------
/Video/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Video</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |   <div class="preloader">
13 |     <img src="./preloader.gif" alt="preloader">
14 |   </div>
15 |   <header>
16 |     <video class="video-container" muted autoplay loop>
17 |       <source src="./video.mp4" type="video/mp4">
18 |     </video>
19 |     <h1>Video Project</h1>
20 |     <button class="switch-btn">
21 |       <span>
22 |         play
23 |       </span>
24 |       <span>
25 |         pause
26 |       </span>
27 |       <span class="switch">
28 |         
29 |       </span>
30 |     </button>
31 |   </header>
32 | 
33 |    <script src='main.js'></script>
34 | </body>
35 | </html> 


--------------------------------------------------------------------------------
/Video/main.js:
--------------------------------------------------------------------------------
 1 | const btn = document.querySelector(".switch-btn");
 2 | const video = document.querySelector(".video-container");
 3 | 
 4 | btn.addEventListener("click", function(){
 5 |   if(!btn.classList.contains("slide")){
 6 |     btn.classList.add("slide");
 7 |     video.pause();
 8 |   }
 9 |   else{
10 |     btn.classList.remove("slide");
11 |     video.play();
12 |   }
13 | });
14 | 
15 | 
16 | const preloader = document.querySelector(".preloader");
17 | 
18 | window.addEventListener("load", function(){
19 |   preloader.classList.add("hide-preloader");
20 | });


--------------------------------------------------------------------------------
/Video/preloader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Video/preloader.gif


--------------------------------------------------------------------------------
/Video/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/Video/video.mp4


--------------------------------------------------------------------------------
/counter/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Counter</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |   <main>
13 |     <div class="container">
14 |       <h1>
15 |         counter
16 |       </h1>
17 |       <span id="value">0</span>
18 |       <div class="button-container">
19 |         <button class="btn decrease">Decrease</button>
20 |         <button class="btn reset">Reset</button>
21 |         <button class="btn increase">İncrease</button>
22 |       </div>
23 |     </div>
24 |   </main>
25 | 
26 |    <script src='main.js'></script>
27 | </body>
28 | </html> 


--------------------------------------------------------------------------------
/counter/main.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | =============== 
  3 | Fonts
  4 | ===============
  5 | */
  6 | @import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
  7 | 
  8 | /*
  9 | =============== 
 10 | Variables
 11 | ===============
 12 | */
 13 | 
 14 | :root {
 15 |   /* dark shades of primary color*/
 16 |   --clr-primary-1: hsl(205, 86%, 17%);
 17 |   --clr-primary-2: hsl(205, 77%, 27%);
 18 |   --clr-primary-3: hsl(205, 72%, 37%);
 19 |   --clr-primary-4: hsl(205, 63%, 48%);
 20 |   /* primary/main color */
 21 |   --clr-primary-5: hsl(205, 78%, 60%);
 22 |   /* lighter shades of primary color */
 23 |   --clr-primary-6: hsl(205, 89%, 70%);
 24 |   --clr-primary-7: hsl(205, 90%, 76%);
 25 |   --clr-primary-8: hsl(205, 86%, 81%);
 26 |   --clr-primary-9: hsl(205, 90%, 88%);
 27 |   --clr-primary-10: hsl(205, 100%, 96%);
 28 |   /* darkest grey - used for headings */
 29 |   --clr-grey-1: hsl(209, 61%, 16%);
 30 |   --clr-grey-2: hsl(211, 39%, 23%);
 31 |   --clr-grey-3: hsl(209, 34%, 30%);
 32 |   --clr-grey-4: hsl(209, 28%, 39%);
 33 |   /* grey used for paragraphs */
 34 |   --clr-grey-5: hsl(210, 22%, 49%);
 35 |   --clr-grey-6: hsl(209, 23%, 60%);
 36 |   --clr-grey-7: hsl(211, 27%, 70%);
 37 |   --clr-grey-8: hsl(210, 31%, 80%);
 38 |   --clr-grey-9: hsl(212, 33%, 89%);
 39 |   --clr-grey-10: hsl(210, 36%, 96%);
 40 |   --clr-white: #fff;
 41 |   --clr-red-dark: hsl(360, 67%, 44%);
 42 |   --clr-red-light: hsl(360, 71%, 66%);
 43 |   --clr-green-dark: hsl(125, 67%, 44%);
 44 |   --clr-green-light: hsl(125, 71%, 66%);
 45 |   --clr-black: #222;
 46 |   --ff-primary: "Roboto", sans-serif;
 47 |   --ff-secondary: "Open Sans", sans-serif;
 48 |   --transition: all 0.3s linear;
 49 |   --spacing: 0.1rem;
 50 |   --radius: 0.25rem;
 51 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 52 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 53 |   --max-width: 1170px;
 54 |   --fixed-width: 620px;
 55 | }
 56 | /*
 57 | =============== 
 58 | Global Styles
 59 | ===============
 60 | */
 61 | 
 62 | *,
 63 | ::after,
 64 | ::before {
 65 |   margin: 0;
 66 |   padding: 0;
 67 |   box-sizing: border-box;
 68 | }
 69 | body {
 70 |   font-family: var(--ff-secondary);
 71 |   background: var(--clr-grey-10);
 72 |   color: var(--clr-grey-1);
 73 |   line-height: 1.5;
 74 |   font-size: 0.875rem;
 75 | }
 76 | ul {
 77 |   list-style-type: none;
 78 | }
 79 | a {
 80 |   text-decoration: none;
 81 | }
 82 | h1,
 83 | h2,
 84 | h3,
 85 | h4 {
 86 |   letter-spacing: var(--spacing);
 87 |   text-transform: capitalize;
 88 |   line-height: 1.25;
 89 |   margin-bottom: 0.75rem;
 90 |   font-family: var(--ff-primary);
 91 | }
 92 | h1 {
 93 |   font-size: 3rem;
 94 | }
 95 | h2 {
 96 |   font-size: 2rem;
 97 | }
 98 | h3 {
 99 |   font-size: 1.25rem;
100 | }
101 | h4 {
102 |   font-size: 0.875rem;
103 | }
104 | p {
105 |   margin-bottom: 1.25rem;
106 |   color: var(--clr-grey-5);
107 | }
108 | @media screen and (min-width: 800px) {
109 |   h1 {
110 |     font-size: 4rem;
111 |   }
112 |   h2 {
113 |     font-size: 2.5rem;
114 |   }
115 |   h3 {
116 |     font-size: 1.75rem;
117 |   }
118 |   h4 {
119 |     font-size: 1rem;
120 |   }
121 |   body {
122 |     font-size: 1rem;
123 |   }
124 |   h1,
125 |   h2,
126 |   h3,
127 |   h4 {
128 |     line-height: 1;
129 |   }
130 | }
131 | /*  global classes */
132 | 
133 | /* section */
134 | .section {
135 |   padding: 5rem 0;
136 | }
137 | 
138 | .section-center {
139 |   width: 90vw;
140 |   margin: 0 auto;
141 |   max-width: 1170px;
142 | }
143 | @media screen and (min-width: 992px) {
144 |   .section-center {
145 |     width: 95vw;
146 |   }
147 | }
148 | main {
149 |   min-height: 100vh;
150 |   display: grid;
151 |   place-items: center;
152 | }
153 | 
154 | /*
155 | =============== 
156 | Counter
157 | ===============
158 | */
159 | 
160 | main {
161 |   min-height: 100vh;
162 |   display: grid;
163 |   place-items: center;
164 | }
165 | .container {
166 |   text-align: center;
167 | }
168 | #value {
169 |   font-size: 6rem;
170 |   font-weight: bold;
171 | }
172 | .btn {
173 |   text-transform: uppercase;
174 |   background: transparent;
175 |   color: var(--clr-black);
176 |   padding: 0.375rem 0.75rem;
177 |   letter-spacing: var(--spacing);
178 |   display: inline-block;
179 |   transition: var(--transition);
180 |   font-size: 0.875rem;
181 |   border: 2px solid var(--clr-black);
182 |   cursor: pointer;
183 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
184 |   border-radius: var(--radius);
185 |   margin: 0.5rem;
186 | }
187 | .btn:hover {
188 |   color: var(--clr-white);
189 |   background: var(--clr-black);
190 | }


--------------------------------------------------------------------------------
/counter/main.js:
--------------------------------------------------------------------------------
 1 | 
 2 | //set initial count
 3 | let count = 0;
 4 | 
 5 | // select value and buttons
 6 | const value = document.querySelector("#value");
 7 | const btns = document.querySelectorAll(".btn");
 8 | 
 9 | btns.forEach(function(btn) {
10 |    btn.addEventListener("click", function(e) {
11 |       const styles = e.currentTarget.classList
12 |       if(styles.contains("decrease")){
13 |          count--;
14 |       }
15 |       else if(styles.contains("increase")){
16 |          count++;
17 |       }
18 |       else{
19 |          count = 0;
20 |       }
21 |       if(count > 0){
22 |          value.style.color = "green"
23 |       }
24 |       if(count < 0){
25 |          value.style.color = "red"
26 |       }
27 |       if(count == 0){
28 |          value.style.color = "black"
29 |       }
30 |       value.textContent = count;
31 |    })
32 | });


--------------------------------------------------------------------------------
/css-loader/app.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/css-loader/app.js


--------------------------------------------------------------------------------
/css-loader/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |   <title>Slider</title>
 7 |   <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |   <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
 9 | </head>
10 | <body>
11 | 
12 |   <div class="spinner">
13 |     <div></div>
14 |     <div></div>
15 |   </div>
16 | 
17 |   <div class="bouncer">
18 |     <div></div>
19 |     <div></div>
20 |     <div></div>
21 |     <div></div>
22 |     <div></div>
23 |     <div></div>
24 |   </div>
25 | 
26 |   <div class="cube">
27 |     <div></div>
28 |     <div></div>
29 |     <div></div>
30 |     <div></div>
31 |     <div></div>
32 |     <div></div>
33 |     <div></div>
34 |     <div></div>
35 |     <div></div>
36 |   </div>
37 | 
38 | <script src='app.js'></script>
39 | </body>
40 | </html>


--------------------------------------------------------------------------------
/css-loader/style.css:
--------------------------------------------------------------------------------
  1 | :root{
  2 |   --spinner-color: #ff4f81;
  3 |   --bounce-color: #a51890;
  4 |   --cube-color: #00205b;
  5 | }
  6 | 
  7 | body{
  8 |   display: flex;
  9 |   justify-content: space-around;
 10 |   align-items: flex-end;
 11 |   padding: 100px 0px;
 12 |   background-color: #eee;
 13 | }
 14 | 
 15 | .cube{
 16 |   width: 100px;
 17 |   height: 100px;
 18 | }
 19 | 
 20 | .cube div{
 21 |   width: 33.33%;
 22 |   height: 33.33%;
 23 |   background-color: var(--cube-color);
 24 |   float: left;
 25 |   animation: scaleCube 1.3s ease infinite;
 26 | }
 27 | 
 28 | .cube div:nth-child(1){animation-delay: .3s;}
 29 | .cube div:nth-child(2){animation-delay: .4s;}
 30 | .cube div:nth-child(3){animation-delay: .5s;}
 31 | .cube div:nth-child(4){animation-delay: .2s;}
 32 | .cube div:nth-child(5){animation-delay: .3s;}
 33 | .cube div:nth-child(6){animation-delay: .4s;}
 34 | .cube div:nth-child(7){animation-delay: .1s;}
 35 | .cube div:nth-child(8){animation-delay: .2s;}
 36 | .cube div:nth-child(9){animation-delay: .2s;}
 37 | 
 38 | @keyframes scaleCube{
 39 |   0%, 70%, 100% {transform: scale3d(1,1,1);}
 40 |   35% {transform: scale3d(0,0,1);}
 41 | }
 42 | 
 43 | .bouncer{
 44 |   position: relative;
 45 |   display: flex;
 46 |   justify-content: space-around;
 47 |   width: 200px;
 48 | }
 49 | 
 50 | .bouncer div{
 51 |   box-sizing: border-box;
 52 |   width: 20px;
 53 |   height: 20px;
 54 |   border-radius: 20px;
 55 |   background-color: var(--bounce-color);
 56 |   animation: bounce .5s ease infinite alternate;
 57 | }
 58 | 
 59 | .bouncer div:nth-child(2){
 60 |   animation-delay: .1s;
 61 | }
 62 | 
 63 | .bouncer div:nth-child(3){
 64 |   animation-delay: .2s;
 65 | }
 66 | 
 67 | .bouncer div:nth-child(4){
 68 |   animation-delay: .3s;
 69 | }
 70 | 
 71 | .bouncer div:nth-child(5){
 72 |   animation-delay: .4s;
 73 | }
 74 | 
 75 | .bouncer div:nth-child(6){
 76 |   animation-delay: .5s;
 77 | }
 78 | 
 79 | 
 80 | @keyframes bounce{
 81 |   from{ transform: translateY(0); opacity: 1;}
 82 |   to{ transform: translateY(-50px); opacity: 0.4;}
 83 | }
 84 | 
 85 | .spinner{
 86 |   position: relative;
 87 |   width: 100px;
 88 |   height: 100px;
 89 | }
 90 | 
 91 | .spinner div{
 92 |   position: absolute;
 93 |   box-sizing: border-box;
 94 |   width: 100%;
 95 |   height: 100%;
 96 |   animation: spinner 2s linear infinite;
 97 | }
 98 | 
 99 | .spinner div:first-child{
100 |   border: 10px solid transparent;
101 |   border-top-color: var(--spinner-color);
102 |   border-radius: 50%;
103 | }
104 | 
105 | .spinner div:last-child{
106 |   border: 10px solid transparent;
107 |   border-bottom-color: var(--spinner-color);
108 |   border-radius: 50%;
109 | }
110 | 
111 | 
112 | @keyframes spinner{
113 |   from {transform: rotate(0deg);}
114 |   50% {transform: rotate(180deg); border-width: 2px; border-bottom-color: blue; border-top-color: cadetblue;}
115 |   to {transform: rotate(360deg);}
116 | }


--------------------------------------------------------------------------------
/drag-and-drop-chess/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |    <meta charset='utf-8'>
 5 |    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |    <title>Chess</title>
 7 |    <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 |    
12 |    <div id="gameboard">
13 |       <div class="square beige">
14 |          <img src="king.png" alt="King piece" id="king" class="chess-piece" draggable>
15 |       </div>
16 |       <div class="square brown"></div>
17 |       <div class="square beige"></div>
18 |    </div>
19 | 
20 |    <p id="info"></p>
21 | 
22 |    <script src='main.js'></script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/drag-and-drop-chess/king.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rbctugrul/Html_Css_Javascript_Examples/3e7afa6d863e71f4ab6e8e788a05724b03b422c1/drag-and-drop-chess/king.png


--------------------------------------------------------------------------------
/drag-and-drop-chess/main.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |    display: flex;
 3 |    justify-content: center;
 4 |    height: 100vh;
 5 |    align-items: center;
 6 |    flex-direction: column;
 7 | }
 8 | 
 9 | #gameboard{
10 |    display: flex;
11 |    
12 | }
13 | 
14 | .square{
15 |    width: 200px;
16 |    height: 200px;
17 |    background-color: rgb(227, 227, 199);
18 | }
19 | 
20 | .beige{
21 |    background-color: rgb(227, 227, 199);
22 | }
23 | 
24 | .brown{
25 |    background-color: rgb(96, 54, 54);
26 | }
27 | 
28 | #info {
29 |    height: 30px;
30 | }
31 | 
32 | .highlight{
33 |    background-color: rgb(233, 102, 102);
34 | }
35 | 
36 | .target{
37 |    border: solid 10px rgb(169, 56, 56);
38 |    box-sizing: border-box;
39 | }
40 | 
41 | .chess-piece{
42 |    height: 200px;
43 |    width: 200px;
44 | }


--------------------------------------------------------------------------------
/drag-and-drop-chess/main.js:
--------------------------------------------------------------------------------
 1 | const king =  document.querySelector(".chess-piece");
 2 | 
 3 | const squares = document.querySelectorAll(".square");
 4 | 
 5 | const infoDisplay = document.querySelector("#info");
 6 | 
 7 | king.addEventListener("drag", dragging);
 8 | 
 9 | king.addEventListener("dragstart", dragStart);
10 | 
11 | squares.forEach(square => {
12 |    square.addEventListener("dragover", dragOver);
13 |    square.addEventListener("dragenter", dragEnter);
14 |    square.addEventListener("dragleave", dragLeave);
15 |    square.addEventListener("drop", dragDrop);
16 |    square.addEventListener("dragend", dragEnd);
17 | });
18 | 
19 | let beingDragged;
20 | 
21 | function dragging() {
22 |    infoDisplay.textContent = "You are dragging a " + beingDragged.id;
23 | };
24 | 
25 | function dragStart(e){
26 | beingDragged = e.target;
27 | };
28 | 
29 | function dragOver(e){
30 |    e.preventDefault();
31 | };
32 | 
33 | function dragEnter(e){
34 |    e.target.classList.add("highlight");
35 | };
36 | 
37 | function dragLeave(e){
38 |    e.target.classList.remove("highlight");
39 | };
40 | 
41 | function dragDrop(e){
42 |     e.target.append(beingDragged);
43 |     e.target.classList.remove("highlight");
44 | };
45 | 
46 | function dragEnd(e){
47 |    e.target.classList.add("target");
48 |    setTimeout(() => e.target.classList.remove("target"), 100);
49 |    infoDisplay.textContent = "";
50 | };


--------------------------------------------------------------------------------
/ilerleme-adimlari/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>İlerleme Adımları</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <div class="progress-container">
14 |             <div class="progress" id="progress"></div>
15 |             <div class="circle active">1</div>
16 |             <div class="circle">2</div>
17 |             <div class="circle">3</div>
18 |             <div class="circle">4</div>
19 |         </div>
20 | 
21 |         <button class="btn" id="prev" disabled>Önceki</button>
22 |         <button class="btn" id="next" >Sonraki</button>
23 |     </div>
24 | 
25 |     <script src='main.js'></script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/ilerleme-adimlari/main.css:
--------------------------------------------------------------------------------
 1 | :root{
 2 |     --line-border-fill: #ff4d6d;
 3 |     --line-border-empty: #dee2e6;
 4 | }
 5 | 
 6 | *{
 7 |     box-sizing: border-box;
 8 | }
 9 | 
10 | body{
11 |     font-family: sans-serif;
12 |     background-color: #f8f9fa;
13 |     display: flex;
14 |     align-items: center;
15 |     justify-content: center;
16 |     height: 100vh;
17 |     margin: 0;
18 |     overflow: hidden;
19 | }
20 | 
21 | .container{
22 |     text-align: center;
23 | }
24 | 
25 | .progress-container{
26 |     display: flex;
27 |     justify-content: space-between;
28 |     position: relative;
29 |     margin-bottom: 30px;
30 |     width: 350px;
31 |     max-width: 100%;
32 | }
33 | 
34 | .progress-container::before{
35 |     content: '';
36 |     background-color: var(--line-border-empty);
37 |     height: 4px;
38 |     width: 100%;
39 |     position: absolute;
40 |     top: 50%;
41 |     left: 0;
42 |     transform: translateY(-50%);
43 |     z-index: -1;
44 |     transition: 0.4s ease;
45 | }
46 | 
47 | .progress{
48 |     background-color: var(--line-border-fill);
49 |     height: 4px;
50 |     width: 0%;
51 |     position: absolute;
52 |     top: 50%;
53 |     left: 0;
54 |     transform: translateY(-50%);
55 |     z-index: -1;
56 |     transition: 0.4s ease;
57 | }
58 | 
59 | .circle{
60 |     background-color: #fff;
61 |     border-radius: 50%;
62 |     height: 30px;
63 |     width: 30px;
64 |     display: flex;
65 |     align-items: center;
66 |     justify-content: center;
67 |     border: 3px solid var(--line-border-empty);
68 |     transition: 0.4s ease;
69 | }
70 | 
71 | .circle.active{
72 |     border-color: var(--line-border-fill);
73 | }
74 | 
75 | .btn{
76 |     background-color: var(--line-border-fill);
77 |     color: #fff;
78 |     border: 0;
79 |     border-radius: 8px;
80 |     cursor: pointer;
81 |     font-family: sans-serif;
82 |     padding: 8px 24px;
83 |     font-size: 14px;
84 |     margin: 5px;
85 | }
86 | 
87 | .btn:active{
88 |     transform: scale(0.98);
89 | }
90 | 
91 | .btn:focus{
92 |     outline: 0;
93 | }
94 | 
95 | .btn:disabled{
96 |     background-color: var(--line-border-empty);
97 | }


--------------------------------------------------------------------------------
/ilerleme-adimlari/main.js:
--------------------------------------------------------------------------------
 1 | const progress = document.getElementById("progress");
 2 | const circles = document.querySelectorAll(".circle");
 3 | const prev = document.getElementById("prev");
 4 | const next = document.getElementById("next");
 5 | 
 6 | let currentActive = 1;
 7 | 
 8 | next.addEventListener("click", () => {
 9 |     currentActive++;
10 | 
11 |     if(currentActive > circles.length){
12 |         currentActive = circles.length;
13 |     }
14 | 
15 |     update();
16 | });
17 | 
18 | prev.addEventListener("click", () => {
19 |     currentActive--;
20 | 
21 |     if(currentActive < 1){
22 |         currentActive = 1;
23 |     }
24 | 
25 |     update();
26 | });
27 | 
28 | function update(){
29 |     circles.forEach((circle,index) => {
30 |         if(index < currentActive){
31 |             circle.classList.add("active");
32 |         } else{
33 |             circle.classList.remove("active");
34 |         }
35 |     })
36 | 
37 |     const actives = document.querySelectorAll(".active");
38 |     progress.style.width = (actives.length -1) / (circles.length -1) *100 +"%";
39 | 
40 |     if(currentActive === 1){
41 |         prev.disabled = true;
42 |     } else if(currentActive === circles.length){
43 |         next.disabled = true;
44 |     }else{
45 |         prev.disabled = false;
46 |         next.disabled = false;
47 |     }
48 | 
49 | }


--------------------------------------------------------------------------------
/random renk/app.js:
--------------------------------------------------------------------------------
 1 | const text = document.getElementById("text")
 2 | const btn = document.getElementById("btn")
 3 | 
 4 | const codesArray = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]
 5 | 
 6 | const randomColorCode = () => {
 7 |     let hexCode = "#"
 8 |     for(let x = 0; x < 6; x++){
 9 |         hexCode += codesArray[Math.floor(Math.random() * codesArray.length)]
10 |     }
11 |     return hexCode
12 | }
13 | 
14 | btn.addEventListener("click",() => {
15 |     const colorCode = randomColorCode()
16 |     text.innerText = colorCode
17 |     document.body.style.backgroundColor = colorCode
18 | })


--------------------------------------------------------------------------------
/random renk/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset='utf-8'>
 5 |   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |   <title>Page Title</title>
 7 |   <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |   <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
 9 | </head>
10 | <body>
11 | 
12 |   <div class="wrap">
13 |     <span id="text">#ffffff</span>
14 |     <button id="btn">Degistir</button>
15 |   </div>
16 | 
17 |   <script src='app.js'></script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/random renk/style.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 |   font-size: 30px;
 6 | }
 7 | 
 8 | body{
 9 |   display: flex;
10 |   justify-content: center;
11 |   align-items: center;
12 |   min-height: 100vh;
13 |   background-color: #ffffff;
14 | }
15 | 
16 | .wrap{
17 |   display: flex;
18 |   flex-direction: column;
19 |   justify-content: center;
20 |   align-items: center;
21 |   width: 200px;
22 |   padding: 20px;
23 |   background-color: rgba(0, 0, 0, .8);
24 |   color: #fff;
25 | }
26 | 
27 | #text{
28 |   margin: 10px 0;
29 |   padding: 10px 20px;
30 |   cursor: pointer;
31 | }


--------------------------------------------------------------------------------
/to do list/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset='utf-8'>
 5 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6 |     <title>To Do List</title>
 7 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 8 |     <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
 9 | </head>
10 | <body>
11 | 
12 |     <div class="container">
13 |         <h1 id="title">To Do List</h1>
14 |         <div>
15 |             <input type="text" id="inputText">
16 |             <input type="submit" id="addToDo" value="Add">
17 |             <input type="submit" id="clearToDo" value="Clear">
18 |         </div>
19 |         <div class="to-dos" id="toDoContainer">
20 | 
21 |         </div>
22 |     </div>
23 | 
24 |     <script src='main.js'></script>
25 | </body>
26 | </html>


--------------------------------------------------------------------------------
/to do list/main.css:
--------------------------------------------------------------------------------
 1 | body{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     background: #ccc;
 5 |     font-family: sans-serif;
 6 | }
 7 | 
 8 | .container{
 9 |     width: 100%;
10 |     text-align: center;
11 |     margin-top: 100px;
12 | }
13 | 
14 | #title{
15 |     text-align: center;
16 |     font-size: 50px;
17 | }
18 | 
19 | #inputText{
20 |     width: 300px;
21 |     height: 46px;
22 |     outline: none;
23 |     font-size: 25px;
24 |     vertical-align: middle;
25 |     border: 3px solid orange;
26 |     border-radius: 15px;
27 |     color: purple;
28 | }
29 | 
30 | #addToDo{
31 |     height: 45px;
32 |     width: 80px;
33 |     border: 1px solid black;
34 |     vertical-align: middle;
35 |     font-size: 25px;
36 |     cursor: pointer;
37 |     outline: none;
38 |     background-color: green;
39 |     color: #fff;
40 |     text-align: center;
41 |     border-radius: 10px;
42 | }
43 | 
44 | #addToDo:active{
45 |     background-color: blue;
46 |     color: #fff;
47 | }
48 | 
49 | #clearToDo{
50 |     height: 45px;
51 |     width: 100px;
52 |     border: 1px solid black;
53 |     vertical-align: middle;
54 |     font-size: 25px;
55 |     cursor: pointer;
56 |     outline: none;
57 |     background-color: red;
58 |     color: #fff;
59 |     text-align: center;
60 |     border-radius: 10px;
61 | }
62 | 
63 | #clearToDo:active{
64 |     background-color: black;
65 | }
66 | 
67 | .paragraph-styling{
68 |     margin: 10;
69 |     cursor: pointer;
70 |     font-size: 35px;
71 |     color: purple;
72 |     text-transform: capitalize;
73 | }


--------------------------------------------------------------------------------
/to do list/main.js:
--------------------------------------------------------------------------------
 1 | let addToDoButton = document.getElementById("addToDo");
 2 | 
 3 | let toDoContainer = document.getElementById("toDoContainer");
 4 | 
 5 | let inputText = document.getElementById("inputText");
 6 | 
 7 | let clearToDo= document.getElementById("clearToDo");
 8 | 
 9 | //Adds p tag on button click.
10 | addToDoButton.addEventListener("click", function(){
11 |     let paragraph = document.createElement("p");
12 |     paragraph.classList.add("paragraph-styling")
13 |     toDoContainer.appendChild(paragraph);
14 |     paragraph.innerHTML = inputText.value;
15 |     inputText.value = "";
16 | 
17 |     //When clicking on a paragraph, it draws a line over the paragraph.
18 |     paragraph.addEventListener("click", function(){
19 |         paragraph.style.textDecoration = "line-through";
20 |     })
21 | 
22 |     //When double-clicking on a paragraph, it draws a line over the paragraph.
23 |     paragraph.addEventListener("dblclick", function(){
24 |         toDoContainer.removeChild(paragraph);
25 |     })
26 | 
27 |     //when clicking on clear button, it clear all paragraphs.
28 |     clearToDo.addEventListener("click", function(){
29 |     paragraph.remove();
30 |     })
31 | })
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------