├── README.md
└── js project
├── animated search bar
├── index.html
├── script.js
└── style.css
├── blur background popup
├── bg.jpg
├── index.html
├── script.js
└── style.css
├── character counter
├── index.html
├── script.js
└── style.css
├── color generator
├── index.html
├── script.js
└── style.css
├── dark mode toggle
├── index.html
├── script.js
└── style.css
├── digital clock
├── bg2.jpg
├── bg3.jpg
├── index.html
├── script.js
└── style.css
├── emoji
├── index.html
├── script.js
└── style.css
├── heart trail animation
├── index.html
├── script.js
└── style.css
├── image scroll effect
├── index.html
├── script.js
└── style.css
├── landing page
├── apple.jpg
├── index.html
├── samsung.jpg
├── script.js
└── style.css
├── month calender
├── index.html
├── script.js
└── style.css
├── multiplication app
├── bg2.jpg
├── index.html
├── script.js
└── style.css
├── profile statistcs
├── index.html
├── script.js
└── style.css
├── random password generator
├── index.html
├── script.js
└── style.css
├── random photos
├── index.html
├── script.js
└── style.css
├── repple effect
├── index.html
├── script.js
└── style.css
├── slider
├── index.html
├── script.js
└── style.css
├── social media selector menu
├── index.html
├── script.js
└── style.css
├── stcky navbar
├── bg.jpg
├── index.html
├── logo.svg
├── script.js
└── style.css
├── step prgress bar
├── index.html
├── script.js
└── style.css
├── tab section
├── index.html
├── script.js
└── style.css
├── text effect
├── index.html
├── script.js
└── style.css
├── timer
├── bg.jpg
├── bg2.jpg
├── index.html
├── script.js
└── style.css
├── todolist
├── index.html
├── script.js
└── style.css
└── video trailer popup
├── img1.jpg
├── index.html
├── script.js
├── style.css
└── video.mp4
/README.md:
--------------------------------------------------------------------------------
1 | # basic-javascript-project
2 |
3 | Contains 25 basic javascript project.
4 |
--------------------------------------------------------------------------------
/js project/animated search bar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Search Bar
8 |
12 |
13 |
14 |
15 |
16 |
18 |
Blur Popup
8 |
13 |
Welcome To Our Website
14 | Click to join
15 |
16 |
17 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/js project/blur background popup/script.js:
--------------------------------------------------------------------------------
1 | const containerEl= document.querySelector(".container");
2 | const btnEl= document.querySelector(".btn");
3 | const popupContainerEl= document.querySelector(".popup-container");
4 | const closeIconEl= document.querySelector(".close-icon");
5 |
6 | btnEl.addEventListener("click", ()=>{
7 | containerEl.classList.add("active");
8 | popupContainerEl.classList.remove("active");
9 | });
10 |
11 | closeIconEl.addEventListener("click", ()=>{
12 | popupContainerEl.classList.add("active");
13 | containerEl.classList.remove("active");
14 | })
--------------------------------------------------------------------------------
/js project/blur background popup/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
4 | }
5 | .container{
6 | display: flex;
7 | flex-direction: column;
8 | align-items: center;
9 | justify-content: center;
10 | height: 100vh;
11 | background-image: url(bg.jpg);
12 | background-size: cover;
13 | text-align: center;
14 | }
15 |
16 | h1{
17 | color: whitesmoke;
18 | font-size: 60px;
19 | letter-spacing: 4px;
20 | text-shadow: 2px 4px 4px rgba(0,0,0,.4);
21 | }
22 |
23 | .btn{
24 | border: none;
25 | border-radius: 5px;
26 | padding: 10px 20px;
27 | width: 200px;
28 | font-size: 18px;
29 | cursor: pointer;
30 | transition: .4s;
31 | }
32 | .btn:hover{
33 | filter: brightness(.8);
34 | }
35 | .active.container{
36 |
37 | filter: blur(5px) brightness(.7);
38 | }
39 | .popup-container{
40 | position: fixed;
41 | transform: translate(-50%);
42 | left: 50%;
43 | width: 400px;
44 | height: 200px;
45 | top: 30%;
46 | background-color: white;
47 | display: flex;
48 | flex-direction: column;
49 | padding: 20px;
50 | border-radius: 5px;
51 | box-shadow: 0 4px 8px rgba(0,0,0,.4);
52 | transition: all.7s;
53 | opacity: 1;
54 | }
55 |
56 | h4{
57 | font-size: 30px;
58 | margin: 10px 0;
59 | color: darkred;
60 | margin-bottom: 40px;
61 | text-align: center;
62 | }
63 |
64 | .popup-btn{
65 | background-color: orange;
66 | padding: 5px;
67 | border: none;
68 | font-size: 20px;
69 | margin-top: 10px;
70 | border-radius: 5px;
71 | cursor: pointer;
72 | }
73 | .input{
74 | outline: none;
75 | border: none;
76 | border-bottom: 2px solid orange;
77 | font-size: 20px;
78 | text-align: center;
79 | }
80 | .close-icon{
81 | position: absolute;
82 | right: 20px;
83 | cursor: pointer;
84 | }
85 | .active.popup-container{
86 | visibility: hidden;
87 | opacity: 0;
88 | top: 10%;
89 | }
90 |
91 | /* popup ın yukardan aşağı açılmasını sağlamak için hem opacity değişti hem de top: 10% verdik popupcontainer top: 30% du. */
--------------------------------------------------------------------------------
/js project/character counter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Character Counter
8 |
12 |
Real-time Character Counter
13 |
14 |
15 |
Total characters:
16 |
Remaining:
17 |
18 |
19 |
Color Generator
8 | Random Color Generator
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/js project/color generator/script.js:
--------------------------------------------------------------------------------
1 | const containerEl= document.querySelector(".container");
2 |
3 | for (let index = 0; index < 30; index++){
4 | const colorContainerEl = document.createElement ("div");
5 |
6 | colorContainerEl.classList.add("color-container");
7 | containerEl.appendChild(colorContainerEl);
8 | }
9 | const colorContainerEls = document.querySelectorAll (".color-container");
10 |
11 |
12 | generateColors();
13 | function generateColors(){
14 | colorContainerEls.forEach((colorContainerEl)=> {
15 | const newColorCode= randomColor();
16 | colorContainerEl.style.backgroundColor = "#" + newColorCode;
17 | colorContainerEl.innerText = "#" + newColorCode;
18 | })
19 | }
20 |
21 |
22 | function randomColor(){
23 | const chars = "0123456789abscef"; //renk yaratan karakterler
24 | const colorCodeLenght = 6;
25 | let colorCode = "";
26 |
27 | for (let index = 0; index < colorCodeLenght; index++){
28 | const randomNum = Math.floor (Math.random() * chars.length);
29 | colorCode += chars.substring(randomNum, randomNum + 1);
30 | }
31 | return colorCode;
32 | }
--------------------------------------------------------------------------------
/js project/color generator/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | font-family: cursive;
4 | }
5 | h1{
6 | text-align: center;
7 | }
8 | .container{
9 | display: flex;
10 | flex-wrap: wrap;
11 | justify-content: center;
12 | }
13 | .color-container{
14 | background-color: rebeccapurple;
15 | width: 300px;
16 | height: 150px;
17 | color: white;
18 | margin: 5px;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center ;
22 | font-size: 25px;
23 | text-shadow: 2px 2px 4px rgba(0,0,0,.5);
24 | border: solid black 2px ;
25 | border-radius: 10px;
26 | }
--------------------------------------------------------------------------------
/js project/dark mode toggle/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dark Mode
8 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/js project/dark mode toggle/script.js:
--------------------------------------------------------------------------------
1 | const inputEl= document.querySelector(".input");
2 | const bodyEl= document.querySelector("body");
3 |
4 |
5 |
6 | inputEl.checked = JSON.parse(localStorage.getItem("mode"));
7 |
8 |
9 | updateBody();
10 | function updateBody(){
11 | if(inputEl.checked){
12 | bodyEl.style.background= "black";
13 |
14 | }else{
15 | bodyEl.style.background= "white";
16 | }
17 | }
18 |
19 | inputEl.addEventListener("input", ()=>{
20 | updateBody();
21 | updaLocalStorage();
22 | })
23 |
24 | function updaLocalStorage(){
25 | localStorage.setItem("mode", JSON.stringify(inputEl.checked));
26 | }
--------------------------------------------------------------------------------
/js project/dark mode toggle/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | height: 100vh;
7 | transition: .4s;
8 | }
9 |
10 | .input{
11 | visibility: hidden;
12 | }
13 |
14 | .label{
15 | position: absolute;
16 | width: 80px;
17 | height: 40px;
18 | background-color: lightgray;
19 | border-radius: 20px;
20 | cursor: pointer;
21 |
22 |
23 | }
24 |
25 | .circle{
26 | width: 34px;
27 | background-color: whitesmoke;
28 | height: 34px;
29 | border-radius: 50%;
30 | top: 3px;
31 | position: absolute;
32 | left:3px;
33 | animation: toggleOff .4s linear forwards
34 | }
35 |
36 | .input:checked + .label{
37 | background-color: white;
38 | }
39 | .input:checked + .label .circle{
40 | animation: toggleOn .4s linear forwards ;
41 | background-color: black;
42 | }
43 | @keyframes toggleOn {
44 | 0%{
45 | transform: translateX(0);
46 | }
47 | 100%{
48 | transform: translateX(40px);
49 | }
50 | }
--------------------------------------------------------------------------------
/js project/digital clock/bg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipekulfetkaylan/basic-javascript-project/2d1a12a310a409ab77f9251cbd775eba73fbdf46/js project/digital clock/bg2.jpg
--------------------------------------------------------------------------------
/js project/digital clock/bg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipekulfetkaylan/basic-javascript-project/2d1a12a310a409ab77f9251cbd775eba73fbdf46/js project/digital clock/bg3.jpg
--------------------------------------------------------------------------------
/js project/digital clock/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Clock
8 | Digital Clock
13 |
14 |
15 | 00
16 | Hours
17 |
18 |
19 | 00
20 | Minute
21 |
22 |
23 | 00
24 | Second
25 |
26 |
27 | AM
28 |
29 |
Emoji Rates
8 |
13 |
14 |
20 |
21 |
27 |
Heart Animation
8 | please move mouse
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/js project/heart trail animation/script.js:
--------------------------------------------------------------------------------
1 | const bodyEl= document.querySelector("body");
2 |
3 | bodyEl.addEventListener("mousemove", (event)=>{
4 | const xPos = event.offsetX
5 | const yPos = event.offsetY
6 | const spanEl= document.createElement("span");
7 | spanEl.style.left = xPos + "px";
8 | spanEl.style.top = yPos + "px";
9 | const size= Math.random() * 100;
10 | spanEl.style.width= size + "px";
11 | spanEl.style.height= size + "px";
12 | bodyEl.appendChild(spanEl);
13 |
14 | setTimeout(()=>{
15 | spanEl.remove()
16 | },3000)
17 | })
18 |
19 |
--------------------------------------------------------------------------------
/js project/heart trail animation/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | height: 100vh;
4 | background-color: black;
5 | overflow: hidden;
6 | }
7 |
8 | h1{
9 | color:whitesmoke;
10 | font-family: cursive;
11 | text-transform: capitalize;
12 | text-align: center;
13 | padding-top: 100px;
14 | letter-spacing: 3px;
15 | font-size: 50px;
16 | }
17 | span{
18 | background: url("https://cdn4.iconfinder.com/data/icons/essentials-74/24/028_-_Heart-256.png") ;
19 | width: 100px;
20 | height: 100px;
21 | position: absolute;
22 | background-size: cover;
23 | left: 50%;
24 | top: 50%;
25 | transform: translate(-50%, -50%);
26 | pointer-events: none;
27 | animation: animate 6s linear;
28 | }
29 |
30 | @keyframes animate{
31 | 0%{
32 | transform: translate(-50%, -50%);
33 | opacity: 1;
34 | filter: hue-rotate(0);
35 | }
36 | 100%{
37 | transform: translate(-50%, -5000%);
38 | opacity: 0;
39 | filter: hue-rotate(655deg);
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/js project/image scroll effect/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | İmage Scroll Effect
8 |
12 |
13 |
Welcome To Our Website
14 |
15 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. At nihil est quasi laudantium aspernatur vitae quo, sed ducimus dolore error ad vel ipsa dignissimos architecto laborum, illo temporibus necessitatibus eum et explicabo. Eveniet, voluptates consequuntur accusantium dolorum obcaecati repellendus et dicta sed inventore, odio, architecto itaque! Velit, doloremque? Harum magni deserunt incidunt molestias minus error ipsam vel ab omnis iste non quibusdam quia maxime neque reprehenderit praesentium eligendi, suscipit officiis! Voluptates ut provident cum! Reprehenderit iste, necessitatibus laborum alias deserunt aspernatur! Magni corrupti iusto eligendi id recusandae, veritatis maiores dolore rerum minus, inventore consequatur quaerat voluptate repudiandae. Vitae, porro nostrum!
16 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. At nihil est quasi laudantium aspernatur vitae quo, sed ducimus dolore error ad vel ipsa dignissimos architecto laborum, illo temporibus necessitatibus eum et explicabo. Eveniet, voluptates consequuntur accusantium dolorum obcaecati repellendus et dicta sed inventore, odio, architecto itaque! Velit, doloremque? Harum magni deserunt incidunt molestias minus error ipsam vel ab omnis iste non quibusdam quia maxime neque reprehenderit praesentium eligendi, suscipit officiis! Voluptates ut provident cum! Reprehenderit iste, necessitatibus laborum alias deserunt aspernatur! Magni corrupti iusto eligendi id recusandae, veritatis maiores dolore rerum minus, inventore consequatur quaerat voluptate repudiandae. Vitae, porro nostrum!
17 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. At nihil est quasi laudantium aspernatur vitae quo, sed ducimus dolore error ad vel ipsa dignissimos architecto laborum, illo temporibus necessitatibus eum et explicabo. Eveniet, voluptates consequuntur accusantium dolorum obcaecati repellendus et dicta sed inventore, odio, architecto itaque! Velit, doloremque? Harum magni deserunt incidunt molestias minus error ipsam vel ab omnis iste non quibusdam quia maxime neque reprehenderit praesentium eligendi, suscipit officiis! Voluptates ut provident cum! Reprehenderit iste, necessitatibus laborum alias deserunt aspernatur! Magni corrupti iusto eligendi id recusandae, veritatis maiores dolore rerum minus, inventore consequatur quaerat voluptate repudiandae. Vitae, porro nostrum!
18 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. At nihil est quasi laudantium aspernatur vitae quo, sed ducimus dolore error ad vel ipsa dignissimos architecto laborum, illo temporibus necessitatibus eum et explicabo. Eveniet, voluptates consequuntur accusantium dolorum obcaecati repellendus et dicta sed inventore, odio, architecto itaque! Velit, doloremque? Harum magni deserunt incidunt molestias minus error ipsam vel ab omnis iste non quibusdam quia maxime neque reprehenderit praesentium eligendi, suscipit officiis! Voluptates ut provident cum! Reprehenderit iste, necessitatibus laborum alias deserunt aspernatur! Magni corrupti iusto eligendi id recusandae, veritatis maiores dolore rerum minus, inventore consequatur quaerat voluptate repudiandae. Vitae, porro nostrum!
19 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. At nihil est quasi laudantium aspernatur vitae quo, sed ducimus dolore error ad vel ipsa dignissimos architecto laborum, illo temporibus necessitatibus eum et explicabo. Eveniet, voluptates consequuntur accusantium dolorum obcaecati repellendus et dicta sed inventore, odio, architecto itaque! Velit, doloremque? Harum magni deserunt incidunt molestias minus error ipsam vel ab omnis iste non quibusdam quia maxime neque reprehenderit praesentium eligendi, suscipit officiis! Voluptates ut provident cum! Reprehenderit iste, necessitatibus laborum alias deserunt aspernatur! Magni corrupti iusto eligendi id recusandae, veritatis maiores dolore rerum minus, inventore consequatur quaerat voluptate repudiandae. Vitae, porro nostrum!
20 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. At nihil est quasi laudantium aspernatur vitae quo, sed ducimus dolore error ad vel ipsa dignissimos architecto laborum, illo temporibus necessitatibus eum et explicabo. Eveniet, voluptates consequuntur accusantium dolorum obcaecati repellendus et dicta sed inventore, odio, architecto itaque! Velit, doloremque? Harum magni deserunt incidunt molestias minus error ipsam vel ab omnis iste non quibusdam quia maxime neque reprehenderit praesentium eligendi, suscipit officiis! Voluptates ut provident cum! Reprehenderit iste, necessitatibus laborum alias deserunt aspernatur! Magni corrupti iusto eligendi id recusandae, veritatis maiores dolore rerum minus, inventore consequatur quaerat voluptate repudiandae. Vitae, porro nostrum!
21 |
Landing Page
8 |
12 |
13 |
Apple
14 | Buy Now
15 |
16 |
17 |
Samsung
18 | Buy Now
19 |
20 |
Month Calender
8 |
13 |
14 |
20 |
21 |
Mon
22 |
Tue
23 |
Wed
24 |
Thu
25 |
Fri
26 |
Sat
27 |
Sun
28 |
29 |
30 |
31 |
32 |
33 |
`;
33 | }
34 |
35 | for(let i= 1; i <= lastDay; i++ ){
36 | if(i === new Date().getDate()){
37 | days += `${i}
`;
38 | }else{
39 | days += `${i}
`;
40 | }
41 |
42 | }
43 | daysEl.innerHTML= days;
44 |
45 |
--------------------------------------------------------------------------------
/js project/month calender/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin:0;
3 | padding:0;
4 | font-family: sans-serif;
5 | box-sizing: border-box;
6 | }
7 | .container{
8 | width: 100%;
9 | height: 100vh;
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | background-color: cornsilk;
14 | }
15 | .calender{
16 | background-color:whitesmoke ;
17 | width: 450px;
18 | height: 520px;
19 | box-shadow: 2px 2px 4px rgba(0,0,0,.3);
20 | border-radius: 25px;
21 | }
22 | .month{
23 | width: 100%;
24 | height: 120px;
25 | background-color:#EF4B4B ;
26 | display: flex;
27 | align-items: center;
28 | justify-content: center;
29 | text-align: center;
30 | border-radius: 25px 25px 0 0;
31 | color: whitesmoke;
32 | }
33 | .month h1{
34 | font-size: 30px;
35 | font-weight: 400;
36 | text-transform: uppercase;
37 | }
38 | .month p{
39 | font-size: 14px;
40 | margin-top: 5px;
41 | }
42 | .weekdays{
43 | display: flex;
44 | margin: 5px;
45 | width: 100%;
46 | height: 50px;
47 | }
48 | .weekdays div{
49 | font-size: 15px;
50 | font-weight: bold;
51 | letter-spacing: 1px;
52 | width: 100%;
53 | display: flex;
54 | align-items: center;
55 | justify-content: center;
56 | }
57 | .days{
58 | width: 100%;
59 | display: flex;
60 | flex-wrap: wrap;
61 | padding: 2px;
62 |
63 | }
64 | .days div{
65 | font-size: 14px;
66 | margin:3px;
67 | width: 57.5px;
68 | height: 60px;
69 | display: flex;
70 | justify-content: center;
71 | align-items: center;
72 | }
73 | .days div:hover:not(.empty){
74 | border: 1px solid #000;
75 | cursor: pointer;
76 |
77 | }
78 | .today{
79 | background-color: #EF4B4B;
80 | }
81 |
--------------------------------------------------------------------------------
/js project/multiplication app/bg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipekulfetkaylan/basic-javascript-project/2d1a12a310a409ab77f9251cbd775eba73fbdf46/js project/multiplication app/bg2.jpg
--------------------------------------------------------------------------------
/js project/multiplication app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Multiplication App
8 | Profile Statistics
9 |
13 |
14 |
20
15 |
Years Exprience
16 |
19 |
20 |
280
21 |
Websites Made
22 |
25 |
26 |
50
27 |
Apps Made
28 |
Random Password Generator
8 |
13 |
Random Password Generator
14 |
15 |
18 |
Generate
19 |
22 | Password Copied
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/js project/random password generator/script.js:
--------------------------------------------------------------------------------
1 | const btnEl= document.querySelector(".btn");
2 | const inputEl= document.getElementById("input");
3 | const copyIconEl= document.querySelector(".fa-copy");
4 | const alertContainerEl= document.querySelector(".alert-container")
5 |
6 | btnEl.addEventListener("click",()=>{
7 | createPassword()
8 | });
9 |
10 | copyIconEl.addEventListener("click", ()=>{
11 | copyPassword();
12 | if(inputEl.value){
13 | alertContainerEl.classList.remove("active");
14 | setTimeout(()=>{
15 | alertContainerEl.classList.add("active");
16 |
17 | },2000);
18 | }
19 |
20 |
21 | });
22 |
23 |
24 | function createPassword(){
25 | const chars="0123456789abcdefghijklmnoprstuwxvyz!@$%#*|^_?:{}^#ABCDEFGHIJKLMNOPRSTUWXVYZ"
26 | const passwordLenght= 14;
27 | let password="";
28 | for( let index=0; index < passwordLenght; index++){
29 | const randomNum= Math.floor (Math.random()* chars.length);
30 | password += chars.substring(randomNum, randomNum+ 1);//substring başlangıç ve bitiş parametresi alır ve parametre aralığındaki değerleri seçer
31 | }
32 | inputEl.value= password;
33 | alertContainerEl.innerText= password + " "+ "copied!"
34 |
35 | }
36 |
37 | function copyPassword(){
38 |
39 | inputEl.select();//input içindeki kopyalanacak değeri seçen kod
40 | inputEl.setSelectionRange(0,9999); //sadece mobil için onun dışında kullanmaya gerek yok.
41 | navigator.clipboard.writeText(inputEl.value);//input.value değerini panoya yazan kod
42 |
43 | }
44 |
45 |
46 |
--------------------------------------------------------------------------------
/js project/random password generator/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | height: 100vh;
6 | margin:0;
7 | font-family:'Courier New', Courier, monospace;
8 | }
9 |
10 | .password-container{
11 | background-color: #FFE5B4;
12 | width: 500px;
13 | padding:20px;
14 | border-radius: 10px;
15 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
16 | margin: 10px;
17 | }
18 |
19 | .input-container{
20 | border: solid 2px black;
21 | padding: 10px;
22 | border-radius: 10px;
23 | display: flex;
24 | justify-content: space-between;
25 | align-items: center;
26 |
27 | }
28 |
29 | .input{
30 | border: none;
31 | background-color: transparent;
32 | outline: none;
33 | font-size: 24px;
34 | letter-spacing: 4px;
35 | }
36 | .input::placeholder{
37 | letter-spacing:0;
38 | font-size: 18px;
39 | }
40 | .fa-copy{
41 | cursor: pointer;
42 | opacity: .3;
43 | }
44 | .fa-copy:hover{
45 | opacity: .7;
46 | }
47 | .btn{
48 | background-color: black;
49 | color: whitesmoke;
50 | border: none;
51 | padding: 10px 10px;
52 | border-radius: 8px;
53 | margin:10px 0;
54 | font-size: 20px;
55 | }
56 | .btn:hover{
57 | cursor: pointer;
58 | background-color: #5FD068;
59 | color: black;
60 | }
61 | .btn:active{
62 | transform: scale(0.95);
63 | }
64 | .alert-container{
65 | position: fixed;
66 | width: 300px;
67 | height: 50px;
68 | background-color: #5FD068;
69 | right: 20px;
70 | bottom: 20px;
71 | border-radius: 10px;
72 | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
73 | display: flex;
74 | justify-content: center;
75 | align-items: center;
76 | font-size: 20px;
77 | transition: .5s;
78 |
79 | }
80 |
81 | .alert-container.active{
82 | right: -300px;
83 |
84 | }
--------------------------------------------------------------------------------
/js project/random photos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Random Photo
8 | Random Photo Gallery
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
Load More
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/js project/random photos/script.js:
--------------------------------------------------------------------------------
1 | const containerImageEl= document.querySelector(".image-container");
2 | const btnEl= document.querySelector(".btn");
3 |
4 | btnEl.addEventListener("click", ()=>{
5 | imageNum= 10;
6 | addNewImages();
7 | });
8 |
9 | function addNewImages(){
10 | for( let index= 0; index < imageNum; index++ ){
11 | const newImgEl= document.createElement("img");
12 | newImgEl.src = `https://picsum.photos/300/300?random=${Math.floor (Math.random() * 2000)}`;
13 |
14 | containerImageEl.appendChild(newImgEl); //foknsiyonu döngü içine almazsan sadece bir photo ekler.
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/js project/random photos/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | display: flex;
4 | flex-direction: column;
5 | align-items: center;
6 | background-color: lemonchiffon;
7 |
8 | }
9 | h1{
10 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
11 | font-size: 40px;
12 | }
13 | .image-container{
14 | text-align: center;
15 | padding-top: 50px;
16 | }
17 | img{
18 | margin:10px;
19 | border-radius: 10px;
20 | box-shadow: 2px 4px 4px rgba(0,0,0,.4);
21 | background-color: aliceblue;
22 | width: 300px;
23 | height: 300px;
24 | }
25 | .btn{
26 | background-color: teal;
27 | border: none;
28 | outline: none;
29 | font-size: 20px;
30 | padding: 10px 25px;
31 | margin:25px;
32 | border-radius: 10px;
33 | color: aliceblue;
34 | box-shadow: 2px 2px 5px rgba(0,0,0,.4);
35 | cursor: pointer;
36 | }
37 | .btn:hover{
38 | opacity: .8;
39 | }
--------------------------------------------------------------------------------
/js project/repple effect/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Button Effect
8 | Button Slider
8 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
Social Media Selector Menu
9 |
19 | Facebook
Twitter
Youtube
Linkedin
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/js project/social media selector menu/script.js:
--------------------------------------------------------------------------------
1 | const menuEl= document.querySelector(".menu");
2 | const menuText= document.querySelector(".menu p");
3 | const socialListEl= document.querySelector(".social-lists");
4 | const liEls=document.querySelectorAll(".social-lists li");
5 |
6 |
7 | menuEl.addEventListener("click", ()=>{
8 | socialListEl.classList.toggle("hide"); //toggle bir class ekliyor aynı zamanda çıkarıyor
9 | menuEl.classList.toggle("rotate");
10 | });
11 |
12 | liEls.forEach(liEls=>{
13 | liEls.addEventListener("click", ()=>{
14 | menuText.innerHTML= liEls.innerHTML
15 | socialListEl.classList.add("hide");//bir class ekliyor eklenen classı ancak remove ile kaldırabilirsin
16 | menuEl.classList.toggle("rotate");
17 | });
18 | });
--------------------------------------------------------------------------------
/js project/social media selector menu/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | display: flex;
4 | align-items: center;
5 | flex-direction: column;
6 | height: 100vh;
7 | justify-content: center;
8 | font-family: sans-serif;
9 | background: linear-gradient(135deg, #C6FFDD 20%,#FBD786 50%,#f7797d) ;
10 | }
11 | .menu{
12 | background: whitesmoke;
13 | width: 300px;
14 | opacity: .7;
15 | border-radius: 5px;
16 | display: flex;
17 | align-items: center;
18 | justify-content: space-between;
19 | padding:10px;
20 | }
21 |
22 | .menu p{
23 | margin: 0 10px;
24 | display: flex;
25 | align-items: center;
26 |
27 | }
28 | .menu .fa-solid{
29 | transition: transform .2s;
30 | }
31 | .social-lists{
32 | background: whitesmoke;
33 | width: 300px;
34 | padding: 10px;
35 | opacity: .7;
36 | list-style: none;
37 | border-radius: 5px;
38 | }
39 | .social-lists li{
40 | display: flex;
41 | align-items: center;
42 | cursor: pointer;
43 | transition: .4s;
44 | }
45 | .social-lists li:hover{
46 | background: darkgray;
47 | border-radius: 5px;
48 | padding-left: 10px;
49 | }
50 | .social-lists .fa-brands{
51 | margin: 0 10px;
52 | }
53 |
54 | .rotate .fa-solid{
55 | transform: rotate(180deg);
56 |
57 | }
58 | .hide{
59 | visibility: hidden;
60 | }
--------------------------------------------------------------------------------
/js project/stcky navbar/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipekulfetkaylan/basic-javascript-project/2d1a12a310a409ab77f9251cbd775eba73fbdf46/js project/stcky navbar/bg.jpg
--------------------------------------------------------------------------------
/js project/stcky navbar/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Sticky Navbar
8 |
12 |
13 |
19 |
22 |
Welcome to Our Website
23 |
24 |
25 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem eum omnis debitis eaque temporibus, ducimus cum eos soluta odit architecto sint voluptates, minima aspernatur placeat ea, numquam nisi in iure dolorem nemo harum cupiditate! Non ipsa, possimus totam ducimus exercitationem ea sequi hic ab? Nostrum nam incidunt commodi eaque dolore nulla iusto sint nihil aliquam voluptates necessitatibus illum quo porro, unde quia tempora temporibus laborum possimus quaerat in nesciunt quibusdam harum! Consequuntur veritatis nam adipisci iure consectetur quibusdam! Repellat, amet sunt quae rem harum veniam veritatis atque debitis magni sapiente aliquam! Similique minus odio iste perspiciatis voluptatum consequatur provident.
26 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem eum omnis debitis eaque temporibus, ducimus cum eos soluta odit architecto sint voluptates, minima aspernatur placeat ea, numquam nisi in iure dolorem nemo harum cupiditate! Non ipsa, possimus totam ducimus exercitationem ea sequi hic ab? Nostrum nam incidunt commodi eaque dolore nulla iusto sint nihil aliquam voluptates necessitatibus illum quo porro, unde quia tempora temporibus laborum possimus quaerat in nesciunt quibusdam harum! Consequuntur veritatis nam adipisci iure consectetur quibusdam! Repellat, amet sunt quae rem harum veniam veritatis atque debitis magni sapiente aliquam! Similique minus odio iste perspiciatis voluptatum consequatur provident.
27 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem eum omnis debitis eaque temporibus, ducimus cum eos soluta odit architecto sint voluptates, minima aspernatur placeat ea, numquam nisi in iure dolorem nemo harum cupiditate! Non ipsa, possimus totam ducimus exercitationem ea sequi hic ab? Nostrum nam incidunt commodi eaque dolore nulla iusto sint nihil aliquam voluptates necessitatibus illum quo porro, unde quia tempora temporibus laborum possimus quaerat in nesciunt quibusdam harum! Consequuntur veritatis nam adipisci iure consectetur quibusdam! Repellat, amet sunt quae rem harum veniam veritatis atque debitis magni sapiente aliquam! Similique minus odio iste perspiciatis voluptatum consequatur provident.
28 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem eum omnis debitis eaque temporibus, ducimus cum eos soluta odit architecto sint voluptates, minima aspernatur placeat ea, numquam nisi in iure dolorem nemo harum cupiditate! Non ipsa, possimus totam ducimus exercitationem ea sequi hic ab? Nostrum nam incidunt commodi eaque dolore nulla iusto sint nihil aliquam voluptates necessitatibus illum quo porro, unde quia tempora temporibus laborum possimus quaerat in nesciunt quibusdam harum! Consequuntur veritatis nam adipisci iure consectetur quibusdam! Repellat, amet sunt quae rem harum veniam veritatis atque debitis magni sapiente aliquam! Similique minus odio iste perspiciatis voluptatum consequatur provident.
29 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem eum omnis debitis eaque temporibus, ducimus cum eos soluta odit architecto sint voluptates, minima aspernatur placeat ea, numquam nisi in iure dolorem nemo harum cupiditate! Non ipsa, possimus totam ducimus exercitationem ea sequi hic ab? Nostrum nam incidunt commodi eaque dolore nulla iusto sint nihil aliquam voluptates necessitatibus illum quo porro, unde quia tempora temporibus laborum possimus quaerat in nesciunt quibusdam harum! Consequuntur veritatis nam adipisci iure consectetur quibusdam! Repellat, amet sunt quae rem harum veniam veritatis atque debitis magni sapiente aliquam! Similique minus odio iste perspiciatis voluptatum consequatur provident.
30 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem eum omnis debitis eaque temporibus, ducimus cum eos soluta odit architecto sint voluptates, minima aspernatur placeat ea, numquam nisi in iure dolorem nemo harum cupiditate! Non ipsa, possimus totam ducimus exercitationem ea sequi hic ab? Nostrum nam incidunt commodi eaque dolore nulla iusto sint nihil aliquam voluptates necessitatibus illum quo porro, unde quia tempora temporibus laborum possimus quaerat in nesciunt quibusdam harum! Consequuntur veritatis nam adipisci iure consectetur quibusdam! Repellat, amet sunt quae rem harum veniam veritatis atque debitis magni sapiente aliquam! Similique minus odio iste perspiciatis voluptatum consequatur provident.
31 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem eum omnis debitis eaque temporibus, ducimus cum eos soluta odit architecto sint voluptates, minima aspernatur placeat ea, numquam nisi in iure dolorem nemo harum cupiditate! Non ipsa, possimus totam ducimus exercitationem ea sequi hic ab? Nostrum nam incidunt commodi eaque dolore nulla iusto sint nihil aliquam voluptates necessitatibus illum quo porro, unde quia tempora temporibus laborum possimus quaerat in nesciunt quibusdam harum! Consequuntur veritatis nam adipisci iure consectetur quibusdam! Repellat, amet sunt quae rem harum veniam veritatis atque debitis magni sapiente aliquam! Similique minus odio iste perspiciatis voluptatum consequatur provident.
32 |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat autem eum omnis debitis eaque temporibus, ducimus cum eos soluta odit architecto sint voluptates, minima aspernatur placeat ea, numquam nisi in iure dolorem nemo harum cupiditate! Non ipsa, possimus totam ducimus exercitationem ea sequi hic ab? Nostrum nam incidunt commodi eaque dolore nulla iusto sint nihil aliquam voluptates necessitatibus illum quo porro, unde quia tempora temporibus laborum possimus quaerat in nesciunt quibusdam harum! Consequuntur veritatis nam adipisci iure consectetur quibusdam! Repellat, amet sunt quae rem harum veniam veritatis atque debitis magni sapiente aliquam! Similique minus odio iste perspiciatis voluptatum consequatur provident.
33 |
Step Progress Bar
8 |
13 |
Step Progress Bar
14 |
15 |
16 |
17 |
18 | Start
20 |
21 |
22 |
24 |
25 |
27 |
28 |
30 |
31 |
33 |
34 |
36 |
37 |
38 |
40 |
42 |
${idx === 0 ? "Start" : idx === stepsEl.length -1 ? "Final" : "Step" + idx} `;
33 | }
34 | else{
35 | stepEl.classList.remove("checked");
36 | stepEl.innerHTML=`Tabs Project
8 |
12 |
13 |
14 |
15 |
16 |
17 | Step 1
18 | Step 2
19 | Step 3
20 |
21 |
22 |
23 |
24 |
25 |
Step 1
26 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio at quod perspiciatis pariatur non eveniet repellat nobis error doloremque voluptatibus laborum, sapiente perferendis sint voluptas, dolore unde praesentium modi! Unde, minus. Consequuntur ut nobis odit sapiente aut saepe voluptas nesciunt. At alias nisi, adipisci veritatis eius laboriosam mollitia explicabo pariatur iusto, asperiores, nihil rem optio repudiandae neque cumque nesciunt hic iste quae labore. Dolorem, quasi dolor ut consectetur laboriosam quaerat quo? Eum perspiciatis necessitatibus nihil id earum soluta, tempora provident minima saepe voluptatibus exercitationem est odit aliquid error quibusdam expedita incidunt eligendi quos animi dolores cum! Dolores, nulla! Voluptatibus, quidem.
27 |
28 |
29 |
Step 2
30 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio at quod perspiciatis pariatur non eveniet repellat nobis error doloremque voluptatibus laborum, sapiente perferendis sint voluptas, dolore unde praesentium modi! Unde, minus. Consequuntur ut nobis odit sapiente aut saepe voluptas nesciunt. At alias nisi, adipisci veritatis eius laboriosam mollitia explicabo pariatur iusto, asperiores, nihil rem optio repudiandae neque cumque nesciunt hic iste quae labore. Dolorem, quasi dolor ut consectetur laboriosam quaerat quo? Eum perspiciatis necessitatibus nihil id earum soluta, tempora provident minima saepe voluptatibus exercitationem est odit aliquid error quibusdam expedita incidunt eligendi quos animi dolores cum! Dolores, nulla! Voluptatibus, quidem.
31 |
32 |
33 |
Step 3
34 |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio at quod perspiciatis pariatur non eveniet repellat nobis error doloremque voluptatibus laborum, sapiente perferendis sint voluptas, dolore unde praesentium modi! Unde, minus. Consequuntur ut nobis odit sapiente aut saepe voluptas nesciunt. At alias nisi, adipisci veritatis eius laboriosam mollitia explicabo pariatur iusto, asperiores, nihil rem optio repudiandae neque cumque nesciunt hic iste quae labore. Dolorem, quasi dolor ut consectetur laboriosam quaerat quo? Eum perspiciatis necessitatibus nihil id earum soluta, tempora provident minima saepe voluptatibus exercitationem est odit aliquid error quibusdam expedita incidunt eligendi quos animi dolores cum! Dolores, nulla! Voluptatibus, quidem.
35 |
36 |
37 |
38 |
Text Effect
8 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/js project/text effect/script.js:
--------------------------------------------------------------------------------
1 | const containerEl= document.querySelector(".container");
2 |
3 | const careers= ["Youtuber", "Web Developer", "Frelancer","Instructor"];
4 |
5 | let careerIndex= 0;
6 | let characterIndex= 0;
7 |
8 |
9 | updateText();
10 | function updateText(){
11 | characterIndex++;
12 |
13 | containerEl.innerHTML= ` I am ${careers[careerIndex].slice(0,1)==="I" ? "an" : "a"} ${careers[careerIndex].slice(0,characterIndex)} `
14 |
15 | if(characterIndex === careers[careerIndex].length){
16 | careerIndex++
17 | characterIndex = 0
18 | }
19 | if(careerIndex === careers.length){
20 | careerIndex = 0;
21 | }
22 | setTimeout(updateText,400)
23 | }
24 |
25 |
--------------------------------------------------------------------------------
/js project/text effect/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | font-family: cursive;
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | height: 100vh;
8 | background-color:thistle;
9 | }
--------------------------------------------------------------------------------
/js project/timer/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipekulfetkaylan/basic-javascript-project/2d1a12a310a409ab77f9251cbd775eba73fbdf46/js project/timer/bg.jpg
--------------------------------------------------------------------------------
/js project/timer/bg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipekulfetkaylan/basic-javascript-project/2d1a12a310a409ab77f9251cbd775eba73fbdf46/js project/timer/bg2.jpg
--------------------------------------------------------------------------------
/js project/timer/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | New Year Countdown
8 | Countdown to New Year
12 | 2023
13 |
14 |
00
15 |
00
16 |
00
17 |
00
18 |
Todo List
8 | Please add a task
30 | Add is success
31 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/js project/todolist/script.js:
--------------------------------------------------------------------------------
1 | const formEl= document.querySelector(".form");
2 | const alertEl= document.querySelector(".alert");
3 | const alertSuccessEl= document.querySelector(".alert-success");
4 | const inputEl= document.querySelector(".input");
5 | const ulEl= document.querySelector(".list");
6 |
7 | let list= JSON.parse(localStorage.getItem("list"));
8 |
9 | if (list) {
10 | list.forEach((task) => {
11 | toDoList(task);
12 | });
13 | }
14 |
15 | function showAlert(){
16 | if(inputEl.value=== ""){
17 | alertEl.style.display="block";
18 | setTimeout(()=>{
19 | alertEl.style.display="none";
20 | },2000);
21 | }else{
22 | alertSuccessEl.style.display="block";
23 | setTimeout(()=>{
24 | alertSuccessEl.style.display="none";
25 | },2000);
26 |
27 | }
28 |
29 | }
30 |
31 | formEl.addEventListener("submit", (event)=> {
32 | showAlert();
33 | event.preventDefault();
34 | toDoList()
35 | });
36 |
37 | function toDoList(task){
38 |
39 | let newTask= inputEl.value;
40 | if(task){
41 | newTask= task.name
42 | }
43 |
44 | const liEl= document.createElement("li");
45 | if(task && task.checked){
46 | liEl.classList.add("checked");
47 | }
48 |
49 | liEl.innerText= newTask;
50 | ulEl.appendChild(liEl);
51 | inputEl.value="";
52 |
53 | const checkBtnEl= document.createElement("div");
54 | checkBtnEl.innerHTML= `Video Popup
8 |
13 |
14 |
Movie Title
15 |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, optio magnam minus fugit qui eos aperiam inventore suscipit. Adipisci consequuntur iure assumenda, molestias ut laboriosam, corporis quos ducimus aspernatur in vitae repellendus facere? Inventore placeat architecto suscipit consequuntur nihil! Nisi, tempore a officiis rem cumque voluptate quibusdam magni nihil perspiciatis.
16 |
Watch Now
17 |
19 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/js project/video trailer popup/script.js:
--------------------------------------------------------------------------------
1 | const btnEl = document.querySelector(".btn");
2 | const closeIconEl = document.querySelector(".close-icon");
3 | const trailerContainerEl = document.querySelector(".trailer-container");
4 | const videoEl = document.querySelector ("video");
5 |
6 | btnEl.addEventListener("click", ()=>{
7 | trailerContainerEl.classList.remove("active");
8 | });
9 |
10 | closeIconEl.addEventListener("click", ()=>{
11 | trailerContainerEl.classList.add("active");
12 | videoEl.pause();
13 | videoEl.currentTime = 0;
14 | })
--------------------------------------------------------------------------------
/js project/video trailer popup/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin:0;
3 | box-sizing: border-box;
4 | font-family: sans-serif;
5 | display: flex;
6 | justify-content: center;
7 | align-items: center;
8 | height: 100vh;
9 | background-color: black;
10 | }
11 |
12 | .main-container{
13 | max-width: 550px;
14 | padding: 10px;
15 | }
16 | .main-container h1{
17 | color: white;
18 | font-weight: 500px;
19 | }
20 | .main-container p{
21 | color: white;
22 | margin: 15px 0;
23 | }
24 | .btn{
25 | background-color: white;
26 | border: none;
27 | padding: 10px 20px;
28 | cursor: pointer;
29 | font-size: 16px;
30 | border-radius: 5px;
31 | transition: .4s;
32 | }
33 | .btn:hover{
34 | background-color: tomato;
35 | }
36 | .main-container img{
37 | max-width: 100%;
38 | margin-bottom: 15px;
39 | border-radius: 10px;
40 | }
41 | .trailer-container{
42 | position: fixed;
43 | top: 50%;
44 | left: 50%;
45 | transform: translate(-50%, -50%);
46 | background-color: black;
47 | width: 100%;
48 | height: 100%;
49 | display: flex;
50 | justify-content: center;
51 | align-items: center;
52 | transition: opacity .7s;
53 | opacity: 1;
54 | }
55 | .active.trailer-container{
56 | visibility: hidden;
57 | opacity: 0;
58 | }
59 | .trailer-container video{
60 | position: relative;
61 | max-width: 900px;
62 | outline: none;
63 | }
64 | .close-icon{
65 | position: absolute;
66 | top: 30px;
67 | right: 30px;
68 | color: white;
69 | cursor: pointer;
70 | }
71 | @media (max-width: 991px){
72 | .trailer-container video{
73 | max-width: 90%;
74 | }
75 | }
--------------------------------------------------------------------------------
/js project/video trailer popup/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ipekulfetkaylan/basic-javascript-project/2d1a12a310a409ab77f9251cbd775eba73fbdf46/js project/video trailer popup/video.mp4
--------------------------------------------------------------------------------
13 |
14 |
15 |
16 | 
18 | 
14 | 
14 |