EduBridge v1

wow, so an hour and a few minutes in and i already made a decent looking chatbot page. not bad. again, i made a scrappy prototype, and then the polished one and i’ve attached the both of them here. the same old routine.

i made it go from an unordered list of random buttons to a sidebar which looks decent. pushed the header “Good Morning Stardancer!” to the center of the page and pushed it a slight bit up to the center, and made input box.
what the chatbot page consists of:

• 4 chats as a sample of the chat history feature
• a ‘New Chat’ button
• a ‘Search Chats’ button
• a bar showing user’s name, user’s profile photo and a logout button.
• and a greeting which looks optimistic but feels like the sun on a cloudy day.

i didn’t mention how I made this, though. Neither did i on my previous devlogs.

i used CSS and linked the file as a stylesheet hyper-reference to my HTML/browser page file. I then used absolute positioning for standalone elements/children elements (inside containers) and relative positioning for the parent container itself, this allows to “lock” the elements inside in and not let it come outside.
i used text-align: center for as many times i can(not) count (more than 25 times, that’s all i can say confidently) and directional attributes (top, left, right) is the runner up. both of them set the exact direction/“coordinates” an element must be placed appropriately at.

of course, background-color, border and border-radius. the mystical trio. one sets the color of the elemental backdrop itself, another sets the size of the border and its color and the last one sets the curvature of its corners. these three are the holy trinity if you want to style an input box, a container, a button or a textbox.

width and height are two more attributes which are super important, cuz they literally set the size of elements to appear on the screen.

what this taught me was about experimenting with different numbers. testing them out gave me so much information about how a prior line of code worked and why that created the pathway for a specific code to work and why it wouldn’t (i spent an hour crashing out on calling back an id with a . and went on to style hovering buttons–progress much??).

p.s: use PIXELS NEVER CM OR INCHES (px :))

i chose to make a separate page to enter a password. since i’m a beginner i figured out that for a decent prototype and to show how my app flow functions, i’d just make a separate page for it. i might shift the password feature to the homepage later, but this is my plan so far.

So what we can see here is a before vs. after of the password page. Like how you saw the stuff in my first and second devlog, how i went from a scrappy prototype to a decent and cleaned up one clearly showing the intended structure, i’ve framed it similarly here as well.

the first photo shows the elements that were put together using pure semantic HTML (no CSS yet), the logo, the heading, the container which consists of the subtext, password input and button weren’t styled yet.

the second photo on the other hand shows the cleaned up version using CSS and the similar principles I presented in my second devlog. And guess what? this is the exact same page i hinted about in my second devlog? exciting for you? maybe not. exciting for me? absolutely. It does the same three things.

On a serious note though, I coded this mechanism using JavaScript by comparing the fixedPassword (a constant variable) to the passwordEntered (another constant variable which receives the input from the input id using getElementById(“elementName”) ). I assigned two more constant variables, one, to retrieve the click of the ‘Continue’ button and number two, to push an error message. Additionally, I used an addEventListener function, which responds to the click of the button and nested three different conditionals inside the click function. “IF the password is correct” - it takes you to the next page using window.location.href (which I already spoiled earlier)
“ELSE IF there is no password incorrect” - trigger a response.
“ELSE” - trigger another error response.

i just made the interface WAY better. still not at the level i expected, but that’s alright.
the change happened when i implemented CSS instead of just HTML (which i did in my first devlog, yikes). I created a container that consisted of 4 elements. I then assigned classes and IDs to every element on the page so I could select and style them accordingly in my CSS stylesheet.

I then used some JavaScript to make the form more interactive.
Right now the page can do three things:
- If you enter the right email address, the page redirects you to another page (spoiler for upcoming devlogs 👀).
- If you don’t enter an email at all and try to bypass it, the page tells you to stop being lazy.
- What if you enter the wrong email address? Beep. Beep. Invalid email ID.

Jokes aside, this helped me learn about the division of web-development. HTML created the form and threw all the elements on the page, CSS styled them using cryptic code that still gives me headaches. And JavaScript made it all more interactive and useful… like that one guy we all depend on in a group project (hey, shout out man).

Right now, it doesn’t have a secure authentication system, because, news flash, I don’t want to make it that strict for a v1. Maybe in v4s or v5s.

ok so right now what i am doing is getting all the elements on to the page. looks scrappy, i know. but the main goal here is to ONLY and ONLY bring into life the h2 (at the absolute top), h1 (quick talk, smooth school) that subtext below, the buttons, the OR with a divider line and the input box. zero polish, and the next 15 minutes will be spent on, well, trying to get it to be polished.