Posts

Showing posts from February, 2022

Goal tracker

Image
 So I had an idea to make a website that helps in managing goals and habit. It also would include analytics on the days spent in what habits etc. A way to mark whether the habits have been completed for the day. Anyways it had this and many other complex features but I just decided to create simpler version of goal tracker. Its a base version and is very simple ,I made it in a hour. Here are screenshots(Please click on the image to view the high quality version) Here is the html code: <div class= "container" > <input type= "text" class= "display" > <section class= "Goals" > Goals: <br> <select name= "goals" size = 5 class= "Goals_select" > <option value= "" > Sample goal 1 </option> <option value= "" > Sample goal 2 </option> <option value= "" > Sample goal 3 </option> </select> <br> ...

Calculator

Image
 So I made a calculator using Javascript, HTML and CSS It just took 1.5 hours to make this. Its pretty simple but right now it can only accept expressions involving two operands and one operator. It prints invalid input on input being invalid ,but for that i haven't done any proper validation checking. But javascript treats empty values as undefined which can still be used with === signs etc so it prints that(invalid input) whenever there is value which not a number and is not a operator HTML code: <div class= "container" > <div class= "output" > <input type= "text" class= "Output" > </div> <div class= "operators" > <button class= "btn plus" > + </button> <button class= "btn minus" > - </button> <button class= "btn multiply" > * </button> <button class= "btn divide" > / </button>...

Web development: part 3:

Image
 So continuing the trend from the last post, I have expanded upon the NGO website, creating a web page for enrolling in a programme section. I have added some dummy articles with pictures representing different NGO activities. See for yourself. On the web design course front,I have made lot of progress, I have learnt about DOM selectors and event handling, So i am feeling really excited about the possibility of creating so many new stuff.Right now I have an idea of calculator running in my mind, then also changing the alignment of the article in a webpage using javascript and event handling. I have arranged the articles in the same manner as that of the home page and i used float property to wrap the text around the images. Here is the html: <div class= "container" > <div class= "article1 box" > <img src= "children-eating-road-food.jpg" width= 150px height= 100px > Lorem ipsum dolor sit amet, consectetur adipisicing elit, s...

Web development : part 2

Image
 Ok , so during the last post,I posted a page of the "NGO" website and shared some code of styling the page. Now I have made another section of the page namely "Volunteer" page, where a form is coded to allow for input of volunteer information and a styled submit button. Along with that I have added a background image to it and divided the form and description content into boxes. Take a look for yourself, The brown color looks a little ugly but its okay for now. I have also added a highlight to the current selected page on the global navigation bar. I think maybe I should also remove the purple background beneath the NGO banner. I got the background from a search of google images "lavendar". The html code for this page is this: <p class= "para_style1" > Hey,Welcome to our NGO website. You have come to the right place if you wish to be part of our NGO. Just submit your details in the below mentioned form and we will get back to you at the...