├── Currency Converter.css
├── Currency Converter.js
├── Dictionary.css
├── Dictionary.js
├── code.png
├── index6.html
├── index7.html
├── index8.html
├── lol.css
├── script6.js
├── weather.css
└── weather.js


/Currency Converter.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: 0;
 5 |     font-family: sans-serif;
 6 | }
 7 | body{
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     min-height: 100vh;
12 |    
13 |     background-color: blueviolet;
14 | }
15 | .container{
16 |     background-color: white;
17 |     border-radius: 2px;
18 |     width: 250px;
19 |     height: 300px ;
20 | }
21 | .right{
22 |     float: right;
23 |     font-size: 11px;
24 |     font-weight: 600;
25 |     opacity: 0.8;
26 |     margin-right: 50px;
27 |     
28 | }
29 | h3{
30 |     text-align: center;
31 |     padding: 14px 0px;
32 | }
33 | section{
34 |     padding: 10px 10px;
35 | }
36 | .enter{
37 |     font-size: 11px;
38 |     font-weight: 600;
39 |     opacity: 0.8;
40 | }
41 | input{
42 |     outline-color: blueviolet;
43 |     height: 25px;
44 |     margin-top: 5px;
45 |     width: 97%;
46 | }
47 | .to{
48 |     font-size: 11px;
49 |     font-weight: 600;
50 |     opacity: 0.8;
51 | }
52 | .toright{
53 |     float: right;
54 | }
55 | button{
56 |     border: transparent;
57 |     background-color: blueviolet;
58 |     border-radius: 3px;
59 |     padding: 7px 40px;
60 |     cursor: pointer;
61 |     margin-left: 15px;
62 |     color: white;
63 |     margin-top: 10px;
64 | }
65 | select{
66 |     margin-top: 10px;
67 | }


--------------------------------------------------------------------------------
/Currency Converter.js:
--------------------------------------------------------------------------------
 1 | let amount = document.querySelector('input');
 2 | let submitButton = document.querySelector('button');
 3 | let selectBox1 = document.getElementById('cars');
 4 | let selectBox2 = document.getElementById('cars1');
 5 | let bold = document.querySelector('b');
 6 | let howMuch;
 7 | let value;
 8 | let value2;
 9 | 
10 | submitButton.addEventListener('click', function () {
11 |     value = selectBox1.options[selectBox1.selectedIndex].value;
12 |     value2= selectBox2.options[selectBox2.selectedIndex].value;
13 | 
14 |     function convertor() {
15 |         var myHeaders = new Headers();
16 |     myHeaders.append("apikey", "PVtVM8X5G5SXhAIrvmOwYrqT9UmbXmPQ");
17 |     
18 |     var requestOptions = {
19 |       method: 'GET',
20 |       redirect: 'follow',
21 |       headers: myHeaders
22 |         };
23 |         
24 |     fetch(`https://api.apilayer.com/fixer/convert?to=${value2}&from=${value}&amount=${amount.value}`, requestOptions)
25 |       .then(response => response.json()).then(response => wordDetails(response))
26 |       .catch(error => console.log('error', error));
27 |     }
28 |     
29 |     convertor();
30 |    
31 | })
32 | 
33 | function wordDetails(info) {
34 |    howMuch = info.result;
35 |     createNewInfo();
36 |   
37 |   }
38 | function createNewInfo() {
39 |     bold.innerText = `${amount.value} ${value} = ${howMuch} ${value2} `;
40 | }
41 | 


--------------------------------------------------------------------------------
/Dictionary.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: 0;
 5 |     font-family: sans-serif;
 6 | }
 7 | body{
 8 |     display: flex;
 9 |     align-items: center;
10 |     justify-content: center;
11 |     min-height: 100vh;
12 |     background-color: blueviolet;
13 | }
14 | .container{
15 |     background-color: white;
16 |     border-radius: 7px;
17 | }
18 | .container .header{
19 |     text-align: center;
20 |     padding: 20px 0px;
21 |     font-weight: bold;
22 |      font-size: 19px;
23 | }
24 | .container .text{
25 |     font-size: 10px;
26 |     color: grey;
27 |     padding: 20px 10px;
28 | }
29 | .container input{
30 |     padding: 6px 10px;
31 |     margin: 0px 30px;
32 |     border-color: blue;
33 | }
34 | .size{
35 |     font-size: 10px;
36 | }
37 | .two{
38 |     padding: 10px 30px;
39 | }
40 | .line{
41 |     height: 1px;
42 |     background-color: grey;
43 |     margin: 10px 0px;
44 | 
45 | }
46 | .line2{
47 |     font-weight: bold;
48 | }
49 | .line2::before{
50 |     content: '|';
51 |     color: blueviolet;
52 |     
53 |     
54 | }


--------------------------------------------------------------------------------
/Dictionary.js:
--------------------------------------------------------------------------------
 1 | let searchInput = document.querySelector('input');
 2 | let divOne = document.querySelector('.divOne');
 3 | let strangeText;
 4 | 
 5 | 
 6 | 
 7 | searchInput.addEventListener('keyup', e => {
 8 | 
 9 |   if (e.key === "Enter" && searchInput.value != "") {
10 |     requestApi(searchInput.value);
11 |     
12 |     
13 |   }
14 | })
15 | function requestApi(word) {
16 |   let api = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
17 |   fetch(api).then(response => response.json()).then(response => wordDetails(response));
18 | 
19 | }
20 | 
21 | function wordDetails(info) {
22 | 
23 |   strangeText = info[0].phonetics[1].text;
24 |   textType = info[0].meanings[0].partOfSpeech;
25 |   meaningTxt = info[0].meanings[0].definitions[0].definition;
26 |   example=info[0].meanings[2].definitions[4].example;
27 |   createNewInfo();
28 |   
29 | }
30 | 
31 | function createNewInfo() {
32 |    divOne.innerHTML = "";
33 |     divOne.className = 'two';
34 |     divOne.innerHTML = `<h4>${searchInput.value}</h4>
35 |       <span class='size'>${textType} ${strangeText}</span><div class='line'></div><div class="line2">Meaning</div>
36 |      <span class='size'>${meaningTxt}</span><div class='line'></div><div class="line2">Example</div>
37 |      <span class='size'>${example}</span><div class='line'></div><div class="line2">Synonyms</div>
38 |      <span class='size'>hsvdgt hctfa</span>`;
39 |      searchInput.value = "";
40 |      
41 | }
42 | 
43 | 


--------------------------------------------------------------------------------
/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Moemen12/API/c5ee66a1800c4733190087f9f54f20fd7cfb487e/code.png


--------------------------------------------------------------------------------
/index6.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <link rel="stylesheet" href="lol.css">
 9 |   <title>Document</title>
10 | </head>
11 | <body>
12 | <div class="weatherHead">
13 |   <span class="head">Weather App</span><hr>
14 | <div class="name">
15 |    <input type="text" placeholder="Enter city name" required>
16 |    <button>Get weather Status</button>
17 | </div>
18 |   </div>
19 |   
20 | 
21 | 
22 | 
23 |  
24 |  
25 | <script src="script6.js"> </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/index7.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <link rel="stylesheet" href="weather.css">
 9 |   <title>Document</title>
10 | </head>
11 | <body>
12 | 
13 |   <div class="container">
14 |     <p class="header">English  Dictionary</p>
15 |     <input style="outline-color: blueviolet;" type="text" placeholder="Search a word">
16 |        <div class="divOne">
17 |     <p class="text">Type a word and press enter to get meaning example,<br/>pronunciation, and synonyms at that typed word</p>
18 |   </div>
19 |   </div>
20 | 
21 | 
22 | 
23 |  
24 |  
25 | <script src="weather.js"> </script>
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/index8.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <link rel="stylesheet" href="Dictionary.css">
 9 |   <title>Document</title>
10 | </head>
11 | <body>
12 | 
13 |   <div class="container">
14 |     <h3>Currency Converter</h3>
15 |     <section>
16 |       <p class="enter">Enter Amount</p>
17 |       <input type="text">
18 |       <br>
19 |       <br>
20 |       <p class="right">To</p>
21 |       <p class="to">From</p>
22 |       <select id="cars">
23 |         <option>USD</option>
24 |         <option>EUR</option>
25 |         <option>TRY</option>
26 |         <option>CENT</option>
27 |       </select>
28 |       
29 |       <select class="toright" id="cars1">
30 |         <option>TRY</option>
31 |         <option>USD</option>
32 |         <option>EUR</option>
33 |         <option>CENT</option>
34 |       </select>
35 |       <br>
36 |       <br>
37 |       <p style="font-size: 11px"><b></b></p>
38 |       <button>Get Exchange Rate</button>
39 |     </section>
40 |   </div>
41 | 
42 | 
43 | 
44 | 
45 |  
46 | <script src="Dictionary.js"> </script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/lol.css:
--------------------------------------------------------------------------------
 1 | 
 2 | *{
 3 |     margin: 0;
 4 |     padding: 0;
 5 |     box-sizing: border-box;
 6 |     font-family:sans-serif;
 7 | 
 8 | }
 9 | body{
10 |     display: flex;
11 |     align-items: center;
12 |     justify-content: center;
13 |     min-height: 100vh;
14 |     background-color: #3498DB;
15 | }
16 | .wrapper{
17 |     height: 260px;
18 |     background-color: #fff;
19 |     max-width: 410px;
20 |     border-radius: 7px;
21 |     padding: 16px 25px 0;
22 |     transition: height 0.2s ease;
23 | 
24 | }
25 | .wrapper.active{
26 |     height: 430px;
27 | 
28 | }
29 | header h1{
30 | font-size: 21px;
31 | font-weight: bold;
32 | }
33 | header p{
34 |     color:#474747 ;
35 |     font-size: 16px;
36 |     margin-top: 5px;
37 | }
38 | .wrapper .form{
39 |     margin: 20px 0 25px;
40 | 
41 | }
42 | .form:where(input,button){
43 |     width: 100%;
44 |     height: 55px;
45 |     border: none;
46 |     outline: none;
47 |     border-radius: 5px;
48 | }
49 | 
50 | .form input{
51 |     border: 1px solid #999;
52 |     font-size: 18px;
53 |     padding: 0 17px;
54 |     height: 40px;
55 | 
56 | }
57 | .form button{
58 |     background: #3498DB;
59 |     cursor: pointer;
60 |     color: #fff;
61 |     font-size: 17px;
62 |     padding: 10px 0;
63 |     margin-top: 20px;
64 | 
65 |     border: transparent;
66 |     width:256px;
67 | }
68 | .wrapper .qr-code{
69 |     border: 1px solid #ccc;
70 |     padding: 13px 0;
71 |     display: flex;
72 |     align-items: center;
73 |     justify-content: center;
74 |     pointer-events: none;
75 |     opacity: 0;
76 | }
77 | .wrapper.active .qr-code{
78 |     opacity: 1;
79 |     pointer-events: auto;
80 |     transition: opacity 0.5s 0.05s ease;
81 | }
82 | 


--------------------------------------------------------------------------------
/script6.js:
--------------------------------------------------------------------------------
 1 | const wrapper = document.querySelector('.wrapper'),
 2 |   qrInput=wrapper.querySelector('.form input'),
 3 |   generateButton = document.querySelector('.form button'),
 4 |   qrImg = wrapper.querySelector('.qr-code img');
 5 | 
 6 | generateButton.addEventListener('click', () => {
 7 |   let qrValue = qrInput.value;
 8 |   if (!qrValue) return;
 9 |   qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=170x170&data=${qrValue}`;
10 |   wrapper.classList.add('active');
11 |   qrInput.value = '';
12 | 
13 | });


--------------------------------------------------------------------------------
/weather.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 |     font-family: sans-serif;
  6 | }
  7 | 
  8 | 
  9 | 
 10 | 
 11 | div.weatherHead{
 12 |     border: 1px solid transparent;
 13 |     width: 250px;
 14 |     height: 150px;
 15 |     background-color: #FFF;
 16 |     margin: 100px  auto ;
 17 |     border-radius: 5px;
 18 |     position: relative;
 19 | }
 20 | 
 21 | .weatherHead .head{
 22 |     color: #3498DB;
 23 |     font-weight: bold;
 24 |     font-size: 15px;
 25 |     margin-left:30px;
 26 |     margin-top: 10px;
 27 |     position: absolute;
 28 |    
 29 | 
 30 |     
 31 | }
 32 | 
 33 | body{
 34 |     background-color: #3498DB;
 35 | }
 36 | button{
 37 |     display: block;
 38 |     border: transparent;
 39 |     color: #FFF;
 40 |     background-color: #3498DB;
 41 |     padding: 10px 50px;
 42 |     border-radius: 3px;
 43 |     margin-left: 15px;
 44 |     cursor: pointer;
 45 |     
 46 | }
 47 | .name input{
 48 |    margin:20px 18px;
 49 |    width:210px;
 50 |    padding: 5px;
 51 |    border: 1px solid #999 ;
 52 |    outline: none;
 53 | 
 54 | }
 55 | hr{
 56 |     background-color:rgb(253, 245, 245) ;
 57 |     margin-top: 35px;
 58 | }
 59 | 
 60 | div.weatherResult{
 61 |     border: 1px solid transparent;
 62 |     width: 250px;
 63 |     height: 300px;
 64 |     background-color: #FFF;
 65 |     margin: 70px  auto ;
 66 |     border-radius: 5px;
 67 |     position: relative;
 68 |     
 69 | }
 70 | 
 71 | .weatherResult .head{
 72 |     color: #3498DB;
 73 |     font-weight: bold;
 74 |     font-size: 15px;
 75 |     margin-left:30px;
 76 |     margin-top: 10px;
 77 |     position: absolute;
 78 |   
 79 |    
 80 | 
 81 |     
 82 | }
 83 | .weatherResult img{
 84 |     margin-left: 80px;
 85 | }
 86 | h1{
 87 |     margin-left: 80px;
 88 |     font-size: 40px ;
 89 | }
 90 | p{
 91 |     margin-left:32%;
 92 |     letter-spacing: 1px;
 93 |     font-weight: 600;
 94 |     font-size: small;
 95 |     margin-top: 13px;
 96 | }
 97 | p:last-child{
 98 |     letter-spacing: 1px;
 99 |     font-weight: 600;
100 |     font-size: small;
101 |     margin-top: 13px;
102 | }
103 | 
104 | 
105 | .all{
106 |     margin-top: 20px;
107 |     font-size: 15px;
108 |     font-weight: bold;
109 |     padding: 0px 30px;
110 |     position: relative;
111 | }
112 | .temperature{
113 | position: absolute;
114 | left: 0;
115 | padding-left: 5px;
116 | }
117 | .humidity{
118 |     position: absolute;
119 |     right: 0;
120 |     padding-right: 5px;
121 | }
122 | 


--------------------------------------------------------------------------------
/weather.js:
--------------------------------------------------------------------------------
 1 | let cityName = document.querySelector('input');
 2 | let searchButton = document.querySelector('button');
 3 | let container = document.querySelector('.weatherHead');
 4 | 
 5 | 
 6 | 
 7 |   
 8 | searchButton.addEventListener('click', () => {
 9 | 
10 |   var myrequest = new XMLHttpRequest();
11 |   myrequest.open('GET', `https://api.weatherapi.com/v1/current.json?key=df54bc7bb4234f55af7234446222006&q=${cityName.value}&aqi=no`, true);
12 |   myrequest.send();
13 |   myrequest.onreadystatechange = function () {
14 |     if (this.readyState === 4 && this.status === 200) {
15 |        
16 |       var myJsObj = JSON.parse(this.responseText);
17 |       var weatherStatus = myJsObj.current.condition.text;
18 |       var Temp = myJsObj.current.temp_c;
19 |       var icon = myJsObj.current.condition.icon;
20 |       var humidity = myJsObj.current.humidity;
21 |       var capital = myJsObj.location.name;
22 |       var country = myJsObj.location.country;
23 |       var feelslike_c = myJsObj.current.feelslike_c;
24 |      
25 | 
26 |       if (cityName.value !== '') {
27 | 
28 |         container.remove();
29 |         let div = document.createElement('div');
30 |         div.className = 'weatherResult';
31 |         let span = document.createElement('span');
32 |         span.className = 'head';
33 |         let firstText = document.createTextNode('Weather App');
34 |         span.appendChild(firstText);
35 |         let img = document.createElement('img');
36 |         img.setAttribute('src', `${icon}`);
37 |         img.style.cssText = "width=80px";
38 |         let h1 = document.createElement('h1');
39 |         let txt = document.createTextNode(`${Temp} C`);
40 |         h1.appendChild(txt);
41 |         let hr = document.createElement('hr');
42 |         let p1 = document.createElement('p');
43 |         let secondTxt = document.createTextNode(`${weatherStatus}`);
44 |         let p2 = document.createElement('p');
45 |         let thirdTxt = document.createTextNode(`${capital},${country}`);
46 |         let div1 = document.createElement('div');
47 |         div1.className = 'all';
48 |         let span1 = document.createElement('span');
49 |         let span2 = document.createElement('span');
50 |        
51 |         //------------------------------
52 |         p1.appendChild(secondTxt);
53 |         p2.appendChild(thirdTxt);
54 |         div.appendChild(span);
55 |         div.appendChild(hr);
56 |         div.appendChild(img);
57 |         div.appendChild(h1);
58 |         div.appendChild(p1);
59 |         div.appendChild(p2);
60 |         div.appendChild(div1);
61 |         div.appendChild(span1);
62 |         div.appendChild(span2);
63 |       
64 |         document.body.appendChild(div);
65 |         div1.innerHTML = `<span class="temperature">${feelslike_c} C <br>Feels like</span>
66 |       <span class="humidity">${humidity}<br>Humidity</span>`;
67 |          
68 |       
69 |     
70 |       }
71 |   
72 |     }
73 |   }
74 |       
75 |   
76 | });
77 |       
78 |  
79 | 
80 | 
81 | 
82 | 
83 | 
84 | 
85 | 
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 


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