CodemySite_Web development

Free Weather API   in Rapid-API All you need is click “test terminal” to registrate the API, there will be your own  API Key  showing below automatically. And select the language you use , it will generate the code ,only thing you do is copy paste. This is the fetch code,now we need get the  latitude  and l ongitude  throngh window. Then try to fetch the data from API (copy the code in rapid-API) replace the key in the quote Parse the data into json and select. the  data Object  in the console: the location is “data.name” temperature is” data.weather[0].temp” description is “data.weather[0].description” weather icon  is a unique number represented different icons. The url looks like  http://openweathermap.org/img/wn/10d@2x.png more about  icon condition  So replacing the image source here: icon.src = `http://openweathermap.org/img/wn/${data.weather[0].icon}.png`;

 The Chrome extension seems a mystry tech until I watched the tutorial video from Brad Traversy. It's so fun to get to know something web related new. I followed the video step by step. You get your own Chrome extention only with html and css,no Javscript suprisingly. Github file To build the small site,we need a html file. the body structure has two parts: header and content the header is a logo included the content has four icon link in my demo, while you can add as many as you want. For the fonts, I normally use Google Fonts. For the icon,  Font Awesome icon is the first choice. So the html links added in the head. Next , css to layout the box. Then we can upload to Chrome extension. Open three dots in the right side of browser-->more tools-->extension Turn on the developer mode and load unpacked Manifest.json Required to set the manifest-version,name and version you can set the version of your work and number higher when you update icons contains all the icons you ...

  The simple desktop view always catch our eyes, which is popular nowadays.  It can be live in your browser. You may know some Google extentions related which have some functions like clock,to-do list,quotes or bookmarks.  The project's idea is from Brad Traversy tutorial.  I kinda add something more. The site shows the digital clock, editable user name, background changing based on the time, and a random quote with API. Github code HTML Google Font named  Darker Grotesque Three sections: time,h1for greeting name and h2 for quotes The name should be editable with " contenteditable=true " CSS Center box in the page.  Add  a underline to second part.  JAVASCRIPT select the DOM needed with id Get the digital time with new Date() If the hour shows more than 12, adding "PM",or else "AM" If the minutes and seconds show single number,adding zero ahead showTime function runs every second with setTimeout Checking the hour,if less than 12 which means mornin...