In [1]:
import json
In [2]:
from os import walk
#mypath = r'C:\Users\lenovo\Documents\IEEE WebDev\IEEE SP Web Dev Slack export May 15 2017'
mypath = input("Enter file address of logs\n")
Enter file address of logs
C:\Users\lenovo\Documents\IEEE WebDev\IEEE SP Web Dev Slack export May 15 2017
In [3]:
import html.parser
html_parser = html.parser.HTMLParser()
In [4]:
with open(mypath + '\\' + 'users.json') as data_file:
users = json.load(data_file)
In [5]:
names = []
for user in users:
temp = {}
temp['name'] = user['name']
temp['id'] = user['id']
names.append(temp)
print (names)
[{'name': 'abhishek', 'id': 'U57BNJK7G'}, {'name': 'aneesh297', 'id': 'U52KA1B41'}, {'name': 'anmolh', 'id': 'U5479Q8KV'}, {'name': 'arvind111', 'id': 'U549B06V8'}, {'name': 'briny_peddler', 'id': 'U5AT2AH6U'}, {'name': 'gj', 'id': 'U57AF2MQU'}, {'name': 'mahim23', 'id': 'U52GBB6TA'}, {'name': 'manas1998', 'id': 'U5866PWNB'}, {'name': 'mehakarora', 'id': 'U5B8B4CBA'}, {'name': 'mehnaz18', 'id': 'U53NLR7B3'}, {'name': 'mirthunraj', 'id': 'U55GZPZPV'}, {'name': 'mishal23', 'id': 'U536M4S7L'}, {'name': 'nishantkr', 'id': 'U548ZLVEW'}, {'name': 'omkar_p31', 'id': 'U52GL5UQ0'}, {'name': 'pachianil', 'id': 'U54M2QJPK'}, {'name': 'pratyush82', 'id': 'U585PDFSM'}, {'name': 'pvgupta24', 'id': 'U53MW3E0G'}, {'name': 'rahul', 'id': 'U59FV35C7'}, {'name': 'sagarb', 'id': 'U552Q5RH6'}, {'name': 'samarthb', 'id': 'U5CT7AE79'}, {'name': 'sanjanak', 'id': 'U58E0QC15'}, {'name': 'shivanimishra123', 'id': 'U5A1N7TGU'}, {'name': 'srahulsrihari36', 'id': 'U5C5SLR29'}, {'name': 'suyashghuge', 'id': 'U57DKAK8F'}, {'name': 'uday_aditya', 'id': 'U586AT5S8'}, {'name': 'vanshika', 'id': 'U54UM5GLU'}, {'name': 'vidhikothari', 'id': 'U554ESJEB'}, {'name': 'viggi', 'id': 'U52HJQQMR'}, {'name': 'visha_1', 'id': 'U56HKB9PS'}, {'name': 'vkgvvinay', 'id': 'U597AC90S'}]
In [6]:
names_list = {}
for i in names:
names_list[i['id']] = i['name']
In [7]:
print(names_list)
{'U57BNJK7G': 'abhishek', 'U52KA1B41': 'aneesh297', 'U5479Q8KV': 'anmolh', 'U549B06V8': 'arvind111', 'U5AT2AH6U': 'briny_peddler', 'U57AF2MQU': 'gj', 'U52GBB6TA': 'mahim23', 'U5866PWNB': 'manas1998', 'U5B8B4CBA': 'mehakarora', 'U53NLR7B3': 'mehnaz18', 'U55GZPZPV': 'mirthunraj', 'U536M4S7L': 'mishal23', 'U548ZLVEW': 'nishantkr', 'U52GL5UQ0': 'omkar_p31', 'U54M2QJPK': 'pachianil', 'U585PDFSM': 'pratyush82', 'U53MW3E0G': 'pvgupta24', 'U59FV35C7': 'rahul', 'U552Q5RH6': 'sagarb', 'U5CT7AE79': 'samarthb', 'U58E0QC15': 'sanjanak', 'U5A1N7TGU': 'shivanimishra123', 'U5C5SLR29': 'srahulsrihari36', 'U57DKAK8F': 'suyashghuge', 'U586AT5S8': 'uday_aditya', 'U54UM5GLU': 'vanshika', 'U554ESJEB': 'vidhikothari', 'U52HJQQMR': 'viggi', 'U56HKB9PS': 'visha_1', 'U597AC90S': 'vkgvvinay'}
In [8]:
with open(mypath + '\\' + 'channels.json') as data_file:
channels_json = json.load(data_file)
In [9]:
channels = []
for channel in channels_json:
channels.append(channel['name'])
print (channels)
['bookshelf', 'doubts', 'general', 'random']
In [10]:
final_log = []
for channel in channels:
file = open(channel + '.txt','w')
path = mypath + '\\'+ channel
f = []
for (dirpath, dirnames, filenames) in walk(path):
f.extend(filenames)
break
log = []
for session in f:
with open(path+'\\'+session) as data_file:
data = json.load(data_file)
for mesg in data:
sub = 1
for x in mesg:
if x == 'subtype':
sub = 0
break
if mesg['type'] == 'message' and sub:
temp = {}
temp['name'] = names_list[mesg['user']]
temp['text'] = mesg['text']
temp['text'] = html_parser.unescape(temp['text'])
file.write(temp['name'] + ': ')
file.write(temp['text'] + '\n')
log.append(temp)
final_log.append(log)
file.close()
C:\Users\lenovo\Anaconda3\lib\site-packages\ipykernel\__main__.py:23: DeprecationWarning: The unescape method is deprecated and will be removed in 3.5, use html.unescape() instead.
In [11]:
print(final_log)
[[], [{'name': 'sagarb', 'text': 'Discuss doubts here!'}, {'name': 'sagarb', 'text': '<@U59FV35C7> right click in the page and click on Inspect. A pane should open on the right! Send me screenshot'}, {'name': 'aneesh297', 'text': 'and expand the <head> tag before taking a screenshot'}, {'name': 'sagarb', 'text': "I'll be back after dinner :stuck_out_tongue:"}, {'name': 'rahul', 'text': 'ok'}, {'name': 'rahul', 'text': 'how to expand the tag?'}, {'name': 'sagarb', 'text': 'Click on the small arrow on the left of the tag!'}, {'name': 'sagarb', 'text': 'Also, open sources tab and send screenshot'}, {'name': 'rahul', 'text': 'sorry for the delay'}, {'name': 'mahim23', 'text': 'You havent saved the sample.html after editing it'}, {'name': 'rahul', 'text': 'ya ya got it'}, {'name': 'rahul', 'text': 'i just did that only'}, {'name': 'rahul', 'text': 'now its good'}, {'name': 'rahul', 'text': 'thanks and sorry for the trouble'}], [{'name': 'viggi', 'text': 'is this visible to everyone? :stuck_out_tongue:'}, {'name': 'mahim23', 'text': 'Yes it is'}, {'name': 'mishal23', 'text': 'Yes'}, {'name': 'viggi', 'text': 'cool.'}, {'name': 'aneesh297', 'text': 'How many of you are online?'}, {'name': 'mishal23', 'text': 'Me'}, {'name': 'mehakarora', 'text': 'Me'}, {'name': 'mahim23', 'text': 'Me'}, {'name': 'mehnaz18', 'text': 'Me'}, {'name': 'nishantkr', 'text': 'Me'}, {'name': 'pratyush82', 'text': 'me'}, {'name': 'anmolh', 'text': 'Me'}, {'name': 'omkar_p31', 'text': 'Me'}, {'name': 'nishantkr', 'text': 'anmolh: hi Horo Sahab :grin::grin::grin:'}, {'name': 'srahulsrihari36', 'text': 'me'}, {'name': 'aneesh297', 'text': "Since there's a good number of you right now, let's start"}, {'name': 'aneesh297', 'text': "So, lets start with what HTML is first. It's essential to know these basics to do any kind of web development."}, {'name': 'aneesh297', 'text': 'HTML is the standard markup language for creating Web pages.'}, {'name': 'anmolh', 'text': 'Kyu re yaha bhi suru ho gaya\n'}, {'name': 'aneesh297', 'text': 'It stands for Hypertext Markup Language .'}, {'name': 'aneesh297', 'text': "So what's a markup language and how is it different from a programming language?"}, {'name': 'aneesh297', 'text': 'Markup languages are designed for the processing, definition and presentation of text.\nThey are designed not for general purpose programming, but for processing or presentation of text.'}, {'name': 'aneesh297', 'text': 'A simple HTML doc would look like this:'}, {'name': 'aneesh297', 'text': "You can create and edit HTML documents using a simple text editor like Notepad. Just don't forget to save it as a .html file."}, {'name': 'aneesh297', 'text': 'Any doubts so far?'}, {'name': 'aneesh297', 'text': "I'll clarify what each of those parts of the sample code mean in a moment"}, {'name': 'aneesh297', 'text': 'Uh is anybody online?'}, {'name': 'mishal23', 'text': 'aneesh297: No'}, {'name': 'mahim23', 'text': 'No doubts'}, {'name': 'manas1998', 'text': 'No'}, {'name': 'aneesh297', 'text': 'Okay cool'}, {'name': 'pratyush82', 'text': 'yes......no doubts so far'}, {'name': 'aneesh297', 'text': 'So'}, {'name': 'aneesh297', 'text': 'The HTML document itself begins with <html> and ends with </html>.'}, {'name': 'aneesh297', 'text': 'The visible part of the HTML document is between <body> and </body>.'}, {'name': 'aneesh297', 'text': 'These things are called elements.'}, {'name': 'aneesh297', 'text': 'An HTML element usually consists of a start tag and end tag, with the content inserted in between:\n<tagname>Content goes here...</tagname>'}, {'name': 'aneesh297', 'text': 'For example, the paragraph tag:\n<p>Paragraph content</p>'}, {'name': 'aneesh297', 'text': 'In the body, if we want to have headings, we use any of the <h1> to <h6> tags.'}, {'name': 'aneesh297', 'text': 'Where h1 indicates the most important heading and has the largest font size.'}, {'name': 'aneesh297', 'text': '<h1> Heading </h1>'}, {'name': 'samarthb', 'text': 'h2 will have smaller size is it?'}, {'name': 'aneesh297', 'text': 'yes'}, {'name': 'samarthb', 'text': ':+1:'}, {'name': 'aneesh297', 'text': 'Now coming to attributes.'}, {'name': 'aneesh297', 'text': 'Attributes provide additional information about HTML elements.'}, {'name': 'srahulsrihari36', 'text': 'what does it mean by the visible part?? the tag title wont b visible? its out of the body'}, {'name': 'samarthb', 'text': 'Visible on the browser after running i suppose'}, {'name': 'aneesh297', 'text': 'No not the tag. The contents of the tag is visible on the browser.'}, {'name': 'pratyush82', 'text': 'is it more like the webpage name??'}, {'name': 'aneesh297', 'text': "In other words, you'd put the any of the parts that are actually going to appear on the webpage in the body section"}, {'name': 'gj', 'text': 'No. Whatever you see in the browser was coded within the body part.'}, {'name': 'srahulsrihari36', 'text': 'okay!! thnx'}, {'name': 'aneesh297', 'text': 'gj: yes exactly'}, {'name': 'pratyush82', 'text': ':+1:'}, {'name': 'aneesh297', 'text': 'okay . about attributes. All HTML elements can have attributes.'}, {'name': 'aneesh297', 'text': 'for example, if you want to display an image, you use the <img></img> tag.'}, {'name': 'aneesh297', 'text': '*<img> tag'}, {'name': 'samarthb', 'text': 'What do u have inside it? the image name?'}, {'name': 'samarthb', 'text': '<img> name </img>?'}, {'name': 'aneesh297', 'text': 'So to mention which file you want to use, you mention the image name as an attribute'}, {'name': 'aneesh297', 'text': '<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">'}, {'name': 'aneesh297', 'text': 'So src="pic_mountain.jpg" is an attribute.'}, {'name': 'suyashghuge', 'text': 'src? alt?'}, {'name': 'aneesh297', 'text': 'Alternate text.'}, {'name': 'gj', 'text': 'Source.'}, {'name': 'aneesh297', 'text': 'src is the name of the image file.'}, {'name': 'manas1998', 'text': 'Is it necessary to give width and height ??'}, {'name': 'aneesh297', 'text': 'The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). (Not that important)'}, {'name': 'briny_peddler', 'text': 'if we place mouse on image, text shown is given by alt right?'}, {'name': 'aneesh297', 'text': '"Is it necessary to give width and height ?? "No not necessarily, but you can reformat it to your specification using the width and height attributes'}, {'name': 'aneesh297', 'text': 'Coming to the style attribute.'}, {'name': 'aneesh297', 'text': 'Setting the style of an HTML element, can be done with the style attribute.'}, {'name': 'aneesh297', 'text': 'You can use this attribute for most elements.'}, {'name': 'aneesh297', 'text': 'Usually, we avoid explicitly mentioning the style for each element and try to use an external document called a StyleSheet (CSS) to determine the style of our elements.'}, {'name': 'aneesh297', 'text': '<tagname style="property:value;">'}, {'name': 'aneesh297', 'text': 'The property is a CSS property. The value is a CSS value.'}, {'name': 'aneesh297', 'text': 'CSS = cascading style sheets. Sagar will cover this in a while'}, {'name': 'aneesh297', 'text': 'So lets take some style examples.'}, {'name': 'aneesh297', 'text': 'Lets say you want a different background color other than the plain borin white.'}, {'name': 'aneesh297', 'text': 'You can use <body style="background-color:powderblue;">'}, {'name': 'aneesh297', 'text': 'Or for header text: <h1 style="color:blue;">This is a heading</h1>'}, {'name': 'aneesh297', 'text': 'paragraph text: <p style="color:red;">This is a paragraph.</p>'}, {'name': 'aneesh297', 'text': 'Suppose you want to change text alignment of the heading: <h1 style="text-align:center;">Centered Heading</h1>'}, {'name': 'aneesh297', 'text': "There are a lot of style attributes like these. I can't cover them all obviously. You can easily look it up online. We'll share a few resources later"}, {'name': 'mahim23', 'text': 'What if we to change multiple style properties?'}, {'name': 'aneesh297', 'text': 'You use semicolons (;) to separate them in style attribute.'}, {'name': 'aneesh297', 'text': 'For example, <h1 style="text-align:center; color: red;">Centered Heading</h1>'}, {'name': 'rahul', 'text': 'Are there many kinds of tags?'}, {'name': 'aneesh297', 'text': 'yes'}, {'name': 'rahul', 'text': 'I mean like for attaching images or posting sound clips like that'}, {'name': 'aneesh297', 'text': "There's just one type of <img> element, but it can have many attributes."}, {'name': 'rahul', 'text': 'okay'}, {'name': 'sagarb', 'text': 'rahul: Yes there are many kinds of tags. Not for the things you mentioned but for making lists, text boxes, buttons, images, check boxes, radio buttons etc'}, {'name': 'aneesh297', 'text': 'Now, you may notice that "Are there many kinds of tags?" is highlighted as a link. This can be done using the <a> or the link tag.'}, {'name': 'aneesh297', 'text': 'HTML links are defined with the <a> tag:\n<a href="https://www.google.com">This is a link</a>'}, {'name': 'aneesh297', 'text': 'href is the link address attribute'}, {'name': 'rahul', 'text': 'Okay'}, {'name': 'aneesh297', 'text': 'And "This is a link" is what you would view on the screen'}, {'name': 'sagarb', 'text': "But it's not feasible or even required to memorise all these tags all at once. Just remember the basic ones. Search online when need arises.\n\nEach tag also has it's own set of attributes. So it's impossible to remember everything!"}, {'name': 'aneesh297', 'text': 'To help with styling, we have something known as a class attribute.'}, {'name': 'aneesh297', 'text': 'The HTML class attribute makes it possible to define equal styles for elements with the same class name.'}, {'name': 'manas1998', 'text': 'Can we also post sound clips?'}, {'name': 'aneesh297', 'text': 'So for example we could define the style for a <h1> and <p> tag at once by assigning them to the same class.'}, {'name': 'aneesh297', 'text': 'yes you can.'}, {'name': 'rahul', 'text': 'Can you please clear the term attribute'}, {'name': 'sagarb', 'text': "Fine I'll post on main thread"}, {'name': 'rahul', 'text': 'Thanks'}, {'name': 'aneesh297', 'text': '<div class="cities">\n<h2>Paris</h2>\n<p>Paris is the capital and most populous city of France.</p>\n</div>\n\n<div class="cities">\n<h2>Tokyo</h2>\n<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,\nand the most populous metropolitan area in the world.</p>\n</div>'}, {'name': 'suyashghuge', 'text': 'div stands for?'}, {'name': 'aneesh297', 'text': '<div> is used to separate the code into blocks. Nothing more than that'}, {'name': 'sagarb', 'text': 'Okay so Rahul\'s doubt : What exactly are attributes?\n\nAttributes are extra pieces of information about html tags. They define some properties of tags.\n\neg. in `<h1 align="centre">Sample Page</h1>`\n\nh1 is the HTML tag.\nalign is an attribute(or property) of that tag.\ncentre is the value of the attribute align'}, {'name': 'mahim23', 'text': 'And how do we style the components of a class?'}, {'name': 'sagarb', 'text': "mahim23: This would be done in CSS. We'll come to that in a few miuntes"}, {'name': 'aneesh297', 'text': '"And how do we style the components of a class?" You could do that by mentioning it either in an external CSS file'}, {'name': 'suyashghuge', 'text': 'so can we directly write <class = "cities">?'}, {'name': 'aneesh297', 'text': '<style>\ndiv.cities {\n background-color: black;\n color: white;\n margin: 20px 0 20px 0;\n padding: 20px;\n} \n</style>'}, {'name': 'sagarb', 'text': "suyashghuge: div stands for division! It just separates various blocks of html document. It's mainly used to apply different styles/formatting to different blocks.\n\nWe'll come to that in a while"}, {'name': 'aneesh297', 'text': 'No. class is an attribute. Your definition would make it an element.'}, {'name': 'sagarb', 'text': "suyashghuge: No you can't. `class` is an attribute and not a tag."}, {'name': 'rahul', 'text': 'sagarb: ok got it'}, {'name': 'suyashghuge', 'text': ':+1:'}, {'name': 'pratyush82', 'text': 'so will the style tag be within the body tag??'}, {'name': 'aneesh297', 'text': "Okay. Sagar will cover more about styling soon. I'll finish up the rest now."}, {'name': 'manas1998', 'text': 'What is padding?'}, {'name': 'aneesh297', 'text': '*mentioned'}, {'name': 'pratyush82', 'text': ':+1:'}, {'name': 'aneesh297', 'text': 'We can print lists using several different tags.'}, {'name': 'aneesh297', 'text': 'An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.\nThe list items will be marked with bullets (small black circles) by default:'}, {'name': 'aneesh297', 'text': 'For example:'}, {'name': 'aneesh297', 'text': '<ul>\n <li>Coffee</li>\n <li>Tea</li>\n <li>Milk</li>\n</ul>'}, {'name': 'aneesh297', 'text': 'here again you use styles. ex: <ul style="color:blue;">'}, {'name': 'aneesh297', 'text': '*you can use'}, {'name': 'aneesh297', 'text': 'You can change the type of bullet by using list-style-type style property'}, {'name': 'aneesh297', 'text': 'An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.\nThe list items will be marked with numbers by default:'}, {'name': 'aneesh297', 'text': 'Ex:'}, {'name': 'aneesh297', 'text': '<ol>\n <li>Coffee</li>\n <li>Tea</li>\n <li>Milk</li>\n</ol>'}, {'name': 'aneesh297', 'text': 'The type attribute of the <ol> tag, defines the type of the list item marker:'}, {'name': 'aneesh297', 'text': '<ol type="A"> \tThe list items will be numbered with uppercase letters'}, {'name': 'aneesh297', 'text': 'Lists can also be nested:'}, {'name': 'aneesh297', 'text': '<ul>\n <li>Coffee</li>\n <li>Tea\n <ul>\n <li>Black tea</li>\n <li>Green tea</li>\n </ul>\n </li>\n <li>Milk</li>\n</ul>'}, {'name': 'aneesh297', 'text': 'Any doubts so far?'}, {'name': 'pratyush82', 'text': 'nope'}, {'name': 'mahim23', 'text': 'No'}, {'name': 'srahulsrihari36', 'text': 'no'}, {'name': 'aneesh297', 'text': 'Okay'}, {'name': 'aneesh297', 'text': 'Moving on to forms.'}, {'name': 'aneesh297', 'text': 'After this sagar will teach you guys about CSS.'}, {'name': 'aneesh297', 'text': 'The HTML <form> element defines a form that is used to collect user input:'}, {'name': 'aneesh297', 'text': 'An HTML form contains form elements.'}, {'name': 'aneesh297', 'text': 'Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.'}, {'name': 'aneesh297', 'text': 'The <input> element is the most important form element.'}, {'name': 'aneesh297', 'text': 'The <input> element can be displayed in several ways, depending on the type attribute. Ex: radio-button, text submit'}, {'name': 'aneesh297', 'text': '<input type="text"> defines a one-line input field for text input:'}, {'name': 'aneesh297', 'text': 'So an example form might look like this: \n<form action="/action_page.php">\n First name:<br>\n <input type="text" name="firstname" value="Mickey"><br>\n Last name:<br>\n <input type="text" name="lastname" value="Mouse"><br><br>\n <input type="submit" value="Submit">\n</form>'}, {'name': 'aneesh297', 'text': 'Where action is the action taken by the browser after clicking submit'}, {'name': 'aneesh297', 'text': 'Sagar will be taking over now.'}, {'name': 'suyashghuge', 'text': '<form action="/action_page.php"> what is this?'}, {'name': 'pratyush82', 'text': 'what is <br>?'}, {'name': 'sagarb', 'text': 'suyashghuge: Okay so when we obtain some data from the user in the form, the data will have to be sent to the backend. So the url to which data is to be sent in mentioned in action'}, {'name': 'sagarb', 'text': 'pratyush82: Line break'}, {'name': 'pratyush82', 'text': ':+1:'}, {'name': 'sagarb', 'text': "Okay so I'll be taking over now!"}, {'name': 'sagarb', 'text': "There are many more HTML tags but we'll won't cover them, We'll use them when needed"}, {'name': 'sagarb', 'text': 'Now onto CSS'}, {'name': 'sagarb', 'text': 'CSS stands for Cascading style Sheet.'}, {'name': 'sagarb', 'text': 'So as developers, we should always strive to separate different components of our project.'}, {'name': 'sagarb', 'text': 'In developing front end, there are two main things we should cocentrate on :\n*Content* and *Formatting* of that content.'}, {'name': 'sagarb', 'text': 'We use *html* to *structure* the content of our web page.'}, {'name': 'sagarb', 'text': '*CSS* to *format* them.'}, {'name': 'sagarb', 'text': 'Open a text editor (eg. Notepad) and paste it there!'}, {'name': 'rahul', 'text': 'Style attributes have a separate tag?with the name "head"?'}, {'name': 'sagarb', 'text': 'Save the file as `sample.html`. When saving make sure the `file type` is `All files` and not `Text Document`'}, {'name': 'sagarb', 'text': 'Everybody Done?'}, {'name': 'briny_peddler', 'text': 'Yea'}, {'name': 'pratyush82', 'text': 'yes'}, {'name': 'mehnaz18', 'text': 'yeah'}, {'name': 'srahulsrihari36', 'text': 'yes'}, {'name': 'mehakarora', 'text': 'yes'}, {'name': 'pvgupta24', 'text': 'yes'}, {'name': 'sagarb', 'text': 'Now, open the file. It should open in a web browser by defualt.'}, {'name': 'sagarb', 'text': "I'll tell everything in a while!"}, {'name': 'sagarb', 'text': 'Is everybody getting this?'}, {'name': 'pratyush82', 'text': 'yes'}, {'name': 'mehnaz18', 'text': 'yes'}, {'name': 'sagarb', 'text': 'Okay fine'}, {'name': 'omkar_p31', 'text': 'yes'}, {'name': 'sagarb', 'text': 'Now, we move on to CSS and see how it can format this web page.'}, {'name': 'srahulsrihari36', 'text': 'yeh fine'}, {'name': 'rahul', 'text': '"The type attribute of the <ol> tag, defines the type of the list item marker:\n<ol type="A"> The list items will be numbered with uppercase letters"...What does this mean?'}, {'name': 'suyashghuge', 'text': 'i didnt understand line 4 and use of id in the code you had sent'}, {'name': 'sagarb', 'text': "suyashghuge: yes I'll be explaining everything everything in a while"}, {'name': 'sagarb', 'text': 'All of you downloaded and created CSS file?'}, {'name': 'aneesh297', 'text': "rahul: Means that your list will be ordered using uppercase letters. That's all. Ex:\nA. Hi"}, {'name': 'mahim23', 'text': 'Yup'}, {'name': 'aneesh297', 'text': 'B. Hello\nC. hey\nD. howdy'}, {'name': 'pratyush82', 'text': 'yes'}, {'name': 'sagarb', 'text': 'Save the css file in the same folder as the html'}, {'name': 'sagarb', 'text': 'Shall I proceed?'}, {'name': 'briny_peddler', 'text': 'What s hover?'}, {'name': 'rahul', 'text': 'oh ok....so we just need to write the first letter of the whole series...like it was written <ol type=A" right'}, {'name': 'sagarb', 'text': "Okay I'll be explaining everything. But for now don't worry about it! Create those two fles"}, {'name': 'sagarb', 'text': '*files'}, {'name': 'sagarb', 'text': 'Shall I proceed?'}, {'name': 'mahim23', 'text': 'Yes'}, {'name': 'aneesh297', 'text': 'yep'}, {'name': 'pratyush82', 'text': 'yes'}, {'name': 'rahul', 'text': 'okk'}, {'name': 'sagarb', 'text': 'Others??'}, {'name': 'mehnaz18', 'text': 'yeah'}, {'name': 'srahulsrihari36', 'text': 'yeah'}, {'name': 'rahul', 'text': 'Answer please?'}, {'name': 'sagarb', 'text': 'Okay now, open the html file in text editor again!'}, {'name': 'sagarb', 'text': 'Line 4 : \n`<!-- <link rel="stylesheet" href="styles.css" /> -->`\n\n\nChange line 4 to : \n`<link rel="stylesheet" href="styles.css" />`\n\nComments in HTML are written as `<!-- Some Comment -->`. (I hope you all know what comments are)\n\nWhat we are doing here is uncommenting that line. That\'s all'}, {'name': 'sagarb', 'text': 'Done??'}, {'name': 'pvgupta24', 'text': 'yeah'}, {'name': 'mehnaz18', 'text': 'yes'}, {'name': 'pratyush82', 'text': 'yes'}, {'name': 'mahim23', 'text': 'Yes'}, {'name': 'mahim23', 'text': 'But nothing changed'}, {'name': 'srahulsrihari36', 'text': 'yes'}, {'name': 'sagarb', 'text': 'You have to reload the page!'}, {'name': 'mahim23', 'text': 'No sorry I named the stylesheet as "style" instead of "styles"'}, {'name': 'mahim23', 'text': 'sagarb: I KNOW'}, {'name': 'sagarb', 'text': 'Okay so all done??'}, {'name': 'srahulsrihari36', 'text': 'yah done'}, {'name': 'mehakarora', 'text': 'Yes'}, {'name': 'pvgupta24', 'text': 'yes'}, {'name': 'anmolh', 'text': 'Yes'}, {'name': 'pratyush82', 'text': 'yes'}, {'name': 'mahim23', 'text': 'Yes'}, {'name': 'sagarb', 'text': 'Okay so this is the power of CSS. It can format a simple HTML page into a good looking page!'}, {'name': 'rahul', 'text': 'aneesh297: So an example form might look like this: \n<form action="/action_page.php">\n First name:<br>\n <input type="text" name="firstname" value="Mickey"><br>\n Last name:<br>\n <input type="text" name="lastname" value="Mouse"><br><br>\n <input type="submit" value="Submit">\n</form>'}, {'name': 'rahul', 'text': 'I didnt get it'}, {'name': 'sagarb', 'text': "Now let me tell you exactly what CSS is, how we use it and I'll give a brief run through the code snippet I posted!"}, {'name': 'aneesh297', 'text': 'what did you not get?'}, {'name': 'rahul', 'text': '<br> what is this? and in the last second line why type=submit?'}, {'name': 'sagarb', 'text': 'The basic syntax of CSS include : \n1. Selector\n2. property\n3. Value'}, {'name': 'rahul', 'text': 'it should be type=text only right?'}, {'name': 'aneesh297', 'text': '<br> is a line break. Think of it as a simple ENTER'}, {'name': 'sagarb', 'text': '*Selector* : Selects HTML elements to be formatted.'}, {'name': 'rahul', 'text': 'its a tag or what?'}, {'name': 'sagarb', 'text': '*Property* : The properties of the selected element to be altered'}, {'name': 'aneesh297', 'text': 'Yep'}, {'name': 'sagarb', 'text': '*Value* : The value of the property'}, {'name': 'aneesh297', 'text': 'Anything enclosed within a <> is a tage'}, {'name': 'aneesh297', 'text': '*tag'}, {'name': 'aneesh297', 'text': 'A tag can have several attributes though.'}, {'name': 'sagarb', 'text': 'Example : \n```\nbody{\n font-family: tahoma;\n color: #FFFFFF;\n background: #0d1521;\n}\n```'}, {'name': 'rahul', 'text': 'so the body should end with </br> right'}, {'name': 'sagarb', 'text': '(Taken from the CSS file I posted)'}, {'name': 'sagarb', 'text': 'Here, \n`body` is *selector*\n`font-family`, `color`, `background` are *properties*\n`tahoma`, `#FFFFFF`, `#0d1521` are *values*'}, {'name': 'aneesh297', 'text': 'The <br> tag is an empty tag which means that it has no end tag. ie. No need for </br>'}, {'name': 'rahul', 'text': 'oh ok....and the last second line..'}, {'name': 'sagarb', 'text': 'That is in this part of CSS, we are formatting the body element of HTML document.'}, {'name': 'aneesh297', 'text': 'Submit?'}, {'name': 'aneesh297', 'text': 'what about it?'}, {'name': 'sagarb', 'text': "First we'll learn about the syntax to write *selectors*"}, {'name': 'rahul', 'text': 'that "type=submit" thing....it should be type=text only right'}, {'name': 'rahul', 'text': 'because "submit" is "text" only right'}, {'name': 'sagarb', 'text': '```'}, {'name': 'sagarb', 'text': '#choice{\n position: relative;\n transform: translateY(30%);\n width: 95%;\n background: #090d13;\n margin: 0 auto;\n padding: 20px;\n box-sizing: border-box;\n}'}, {'name': 'sagarb', 'text': '```'}, {'name': 'aneesh297', 'text': 'No. It creates a button called submit. Not a form field.'}, {'name': 'aneesh297', 'text': '<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit>'}, {'name': 'aneesh297', 'text': 'The source code is in this link. You can visualize it better now'}, {'name': 'sagarb', 'text': "See the above code. We've used `#choice` as selector. Now what does `#` mean?"}, {'name': 'sagarb', 'text': 'Here `#choice` selects all elements whose `id` attribute has value `choice`'}, {'name': 'aneesh297', 'text': 'I think sagar must have answered this the css intro'}, {'name': 'rahul', 'text': 'ok got it....and style attributes are written in tag named "head"?'}, {'name': 'sagarb', 'text': "If you go back to out HTML document, you'll notice the `div` element has `id` set to `choice`. So that element will be selected and formatted"}, {'name': 'aneesh297', 'text': 'yep'}, {'name': 'sagarb', 'text': 'Similary, you can use `.` to select an element with a specific `class` attribute.\n\nExample : \n```\n.hello{\n}\n```\n\nWill select all elements with attribute class'}, {'name': 'rahul', 'text': 'ok'}, {'name': 'aneesh297', 'text': '*in the css intro'}, {'name': 'rahul', 'text': 'uhh.....Can you please slow down the pace of the course.....its taking time to read and understand everything'}, {'name': 'sagarb', 'text': "Now in that CSS file you've downloaded, you'll find some special selectors.\n```\n#lichoice:hover{\n text-align: center;\n background: rgb(0,0,0);\n}\n```\nSo here, `#lichoice` selects all elements with `id` set to `lichoice`. What does `:hover` do?"}, {'name': 'sagarb', 'text': '`#lichoice:hover` is called a *psudo-selector*. It formats elements when they are in a particular _state_.'}, {'name': 'suyashghuge', 'text': 'but li already comes under the id choice..so shouldnt it follow the #choice properties?'}, {'name': 'sagarb', 'text': "Example : In the HTML doc I sent, you'll notice the list elements change color when you move your mouse over them.\n\nThis is because, we have specified different formatting for `hover state` (ie. when mouse is over that element) and normal state(ie. when mouse is not over the element)"}, {'name': 'sagarb', 'text': "suyashghuge: Yes it is formatted using #choice properties also. In addition we are specifying some properties in #lichoice.\n\nIt's like inheritance. Child elements inherit properties of parents plus they have their own properties"}, {'name': 'mahim23', 'text': "suyashghuge: We're overriding those properties"}, {'name': 'suyashghuge', 'text': ':+1:'}, {'name': 'sagarb', 'text': 'Yes overriding happens if there is a conflict!'}, {'name': 'sagarb', 'text': 'Is everyone with me now?'}, {'name': 'suyashghuge', 'text': ':+1:'}, {'name': 'pratyush82', 'text': 'yes'}, {'name': 'srahulsrihari36', 'text': 'yes'}, {'name': 'abhishek', 'text': 'yes'}, {'name': 'mehakarora', 'text': 'yes'}, {'name': 'sagarb', 'text': "There are many different types of selectors. We'll be sending links. You can read about them online. After this I hope atleast selectors used in that document are clear"}, {'name': 'sagarb', 'text': 'Okay now moving onto *properties* and *values*'}, {'name': 'sagarb', 'text': "*Properties* and *Values* are pretty self explanatory and need no explanation I think! Things like `color` is used to set color property is pretty obvious. Also each property can take many types of values.\n\nThe thing is you can always search the Internet for a property and the type of values it takes. So you not memorise them. Remember just the basic ones.\n\nBut selectors are more important. You have to write selectors so they suit your custom needs. That is, so they are in accordance with the HTML file you've written. So you should know different techniques used to select elements"}, {'name': 'sagarb', 'text': "I'll just go through some basic properties."}, {'name': 'sagarb', 'text': '`color` : color takes different types of values. I mostly use hexadecimal.\nFor example black can be assigned as follows : \n\n`color : black;`\n`color : #000000;`'}, {'name': 'sagarb', 'text': '`color : rgb(0,0,0);`'}, {'name': 'sagarb', 'text': "I use hexadecimal because you can easily get hexadecimal values of any color using Google's color picker.\n\n<https://www.google.co.in/search?q=%23ffffff&oq=%23ffffff&gs_l=serp.3..35i39k1.2341.2737.0.3362.3.3.0.0.0.0.129.376.0j3.3.0....0...1.1.64.serp..0.3.376...0.M1iWv9_Zzjc>"}, {'name': 'sagarb', 'text': 'Some other common properties are `margin` and `padding`. Learn about the differences between them. Both are used to space different elements properly on screen'}, {'name': 'sagarb', 'text': "It's already 9:30"}, {'name': 'sagarb', 'text': 'So this is it for today! If you have any doubts you can always PM any of us!'}, {'name': 'sagarb', 'text': 'Is everything clear today?'}, {'name': 'mahim23', 'text': 'Yup'}, {'name': 'omkar_p31', 'text': 'yes'}, {'name': 'pratyush82', 'text': 'yes'}, {'name': 'briny_peddler', 'text': 'Yea'}, {'name': 'mishal23', 'text': 'Yes..thanks for the session:grinning:'}, {'name': 'mehakarora', 'text': 'Yes'}, {'name': 'sagarb', 'text': 'Thank you for attending the session people! Web development gets very interesting and intense when we get to the backend part! Make sure you attend all those sessions with the same enthusiasm'}, {'name': 'sagarb', 'text': 'rahul shift to doubts channel'}, {'name': 'viggi', 'text': 'srahulsrihari36: there is something called metadata. It says information about the webpage. Notice the tab name once you open the web page:relaxed:'}, {'name': 'viggi', 'text': 'aneesh297: one more thing: such alt tags are supposed to kinda describe the image, as the search engine considers alt tags too, to get search results.'}, {'name': 'viggi', 'text': '<@U5866PWNB> padding:20px would give 20px of blank space inside the border in all 4 sides. '}, {'name': 'manas1998', 'text': 'Ok'}, {'name': 'aneesh297', 'text': 'Guys join the <#C5CM4ACHX|bookshelf> channel. We will be sharing resources there. '}], [{'name': 'aneesh297', 'text': "btw while this is somewhat boring, it's still essential. Wait till Javascript. That's when the fun begins xD"}, {'name': 'aneesh297', 'text': 'hey, do you guys think the pace is a bit too fast?'}, {'name': 'mahim23', 'text': 'No its fine'}, {'name': 'mahim23', 'text': '(My opinion)'}, {'name': 'pratyush82', 'text': 'no...it seems perfect'}]]
In [ ]:
Content source: aneesh297/Slack-Log-Extractor
Similar notebooks: