Hello! I didn’t update anything for the past 2 days as I was learning HTML, CSS and jQuery on CodeAcademy.
It helped me a lot on my understanding and some basic rules to at least let me have an idea on how to display stuffs on website. (argh, i should have learnt it earlier! like 10 years ago may be?) Although i went through jQuery whole tutorial last Friday, I have almost forgotten about it :S. Without practising, the knowledge that we learnt is totally useless. I guess that’s what happen to my previous education. :X Anyway, it is never too late to discover this.
There are too much notes to myself which I won’t note them here because a quick google search can lead to the answer (umm, may be not direct sometimes). But i have taken down important notes on my notebook. I prefer writing and doodling than typing.
Yesterday was a headache because it was a sudden fear and stress on how to put everything together. The previous nice layout was prepared by Michael (a nice guy that i met on R-Pi forum), and i can’t read the css or js file at all😦. Probably the operating system is different which causes the Newline to jumbled up.
But today is a new day and i tore down the work into little pieces which i can try one step at a time.🙂 It proves to be very good. Oh, I submitted 2 of my best Final Year Project proposals.🙂 Prof chose the first one on Raspberry Pi (yay!) but i feel sad for not being able to do the second one about Fibre Optic. Yeah i know “fibre optic” sounds ridiculously “chim” (Singlish dict: difficult to understand) to myself. But it is an idea which i had in mind almost 3 years ago… and people are starting to do it.😦 Hmm, perhaps i should start blogging about my quirky idea in a column?😉
Okay, a brief summary on what I did today (and some user stories):
- Hide and Show block on the web app.
When user comes to the web page, he can only see a login button. Upon clicking the login button, a keypad will appear, prompting for user to key in password. When he clicks “Done”, the keypad will disappear and the control buttons that were hidden now show up. Refer screenshots.- things to do: authentication
- Text input (Form)
I was so happy to see my first form which has a text input.
<form name= "input" action="#" method="get">
<input type="text" name="firstlabel">
I added a few more text inputs and they are all in one column. But i want them to be at side by side.
- Side-by-side text input
The only way that i could think of is to use Table. So here i go! Step by step, i added one row, two rows, two columns and finally to 24 boxes (6 rows x 4 columns). See my table in the screenshot.😀
- I also added “Submit” button in the second column. (just add an empty <td> before it.)
<td><input type="submit" value="Submit"></td>
- Then i changed the word “firstlabel” and so on with the nice “switch.png” which i edit it from a big jpg image. Happy at this point of time!😀
- I also added index number.
- I get to practise my CSS with the shutdown server self-created button. (it has hover effect too :p) and i “Float” it to the right.
Tomorrow, i will carry on with the following:
- submit form and display the table
- add control button in the table
- hide the config table before login
- display status
Screenshots 😀 See how i take these: How to take Screenshot on Raspberry Pi