diff --git a/src/components/Activities/ActivityCard.css b/src/components/Activities/ActivityCard.css new file mode 100644 index 0000000..6dc3f13 --- /dev/null +++ b/src/components/Activities/ActivityCard.css @@ -0,0 +1,49 @@ +.card.activity { + width: 20rem; + height: 400px; +} + +.card.activity:hover { + box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253); +} + +.card.activity.card-body { + padding: 3rem 0; +} + +.card.activity.card-text { + font-size: 0.9rem; + padding: 0.4rem 1.9rem; +} + +.container.fluid.row { + padding-top: 6rem; +} + +.card-img-top.activity { + transform: scale(1); + transition: transform 0.5s ease; + height: 150px; + object-fit: scale-down; +} + +.card-img-top.activity:hover { + transform: scale(1.8); + overflow: hidden; +} + +.btn.activity { + color: #22247a; + background-color: #fff; + border-color: #22247a; +} + +.btn.activity:hover { + color: #fff; + background-color: #22247a; + border-color: #22247a; +} + +.card-title.activity { + font-weight: bold; +} diff --git a/src/components/Activities/ActivityCard.js b/src/components/Activities/ActivityCard.js index ffe4eb5..fd268a3 100644 --- a/src/components/Activities/ActivityCard.js +++ b/src/components/Activities/ActivityCard.js @@ -1,19 +1,19 @@ -import React from 'react' -import { Card } from 'react-bootstrap'; -const ActivityCard = (props) => { - return ( - - - -

{props.activity.title}

 - - {props.activity.text} - - Read More - - +import React from 'react'; +import './ActivityCard.css'; - ) -} +const ActivityCard = props => { + return ( +
+ -export default ActivityCard \ No newline at end of file +
+

+ {props.activity.title} +

+

{props.activity.description}

+
+
+ ); +}; + +export default ActivityCard; diff --git a/src/pages/Blogs/BlogList.css b/src/pages/Blogs/BlogList.css new file mode 100644 index 0000000..b4c292b --- /dev/null +++ b/src/pages/Blogs/BlogList.css @@ -0,0 +1,69 @@ +.card.activity { + width: 20rem; + height: 400px; +} + +.card.activity:hover { + box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253); +} + +.card.activity.card-body { + padding: 3rem 0; +} + +.card.activity.card-text { + font-size: 0.9rem; + padding: 0.4rem 1.9rem; +} + +.container.fluid.row { + padding-top: 6rem; +} + +.card-img-top.activity { + transform: scale(1); + transition: transform 0.5s ease; + height: 150px; + object-fit: scale-down; +} + +.card-img-top.activity:hover { + transform: scale(1.8); + overflow: hidden; +} + +.btn.activity { + color: #22247a; + background-color: #fff; + border-color: #22247a; +} + +.btn.activity:hover { + color: #fff; + background-color: #22247a; + border-color: #22247a; +} + +.card-title.activity { + font-weight: bold; + height: 100px; +} + +::-webkit-scrollbar { + width: 10px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: #3133aa; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #22247a; +} diff --git a/src/pages/Blogs/BlogList.js b/src/pages/Blogs/BlogList.js index 7e6fa33..88e57be 100644 --- a/src/pages/Blogs/BlogList.js +++ b/src/pages/Blogs/BlogList.js @@ -1,123 +1,108 @@ -import React from 'react' -import PropTypes from 'prop-types' +import React from 'react'; +import './BlogList.css'; -export default function BlogList({title,content}) { - return ( - <> -
-
-
+class BlogList extends React.Component { + constructor(props) { + super(props); + this.state = { + activities: [], + visible: false, + currentActivity: null + }; + } -
-
-

What is MDB?

-

MDB is world's most popular Material Design framework for building responsive, mobile-first websites - and apps.

-

Trusted by over - 400 000 developers and designers. Easy to use & customize. 400+ material UI elements, templates - & tutorials.

-
-
-
-
-
-
- -
-
-
-
- -
+ componentDidMount() { + let activities = []; + fetch('https://medium-article-fetcher.herokuapp.com/posts', { + crossDomain: true, + method: 'GET', + headers: { 'Content-Type': 'application/json' } + }) + .then(res => { + return res.json(); + }) + .then(resData => { + for (let i = 0; i < resData.items.length; i++) { + let obj = {}; + obj.title = resData.items[i].title; + obj.link = resData.items[i].link; + let m, + urls = [], + str = resData.items[i].content_encoded, + rex = /]+src="?([^"\s]+)"?\s*\/>/g; -
-
-
-
- - -
- -
-
-
-

- Bootstrap Automation -

-

Learn how to create a smart website which learns your user and reacts properly to his behavior.

- Start tutorial - - -
+ while ((m = rex.exec(str))) { + urls.push(m[1]); + } + obj.img = urls[0]; -
+ let reg = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/; + let stream = resData.items[i].content_encoded.match(reg); -
-
-
-
- - -
- -
-
-
-

- Web Push notifications -

-

Push messaging provides a simple and effective way to re-engage with your users and in this tutorial - you'll learn how to add push notifications to your web app

- Start tutorial - - -
+ obj.description = + stream[1] + .split(' ') + .slice(0, 20) + .join(' ') + '...'; -
+ activities.push(obj); + } + this.setState({ activities: activities }); + }) + .catch(err => { + console.log(err); + }); + } -
- - +
+
+ + ); + })} + + - - - - - - ); + + + + ); + } } +export default BlogList; diff --git a/src/pages/Home/Components/Activities.css b/src/pages/Home/Components/Activities.css new file mode 100644 index 0000000..87b80c6 --- /dev/null +++ b/src/pages/Home/Components/Activities.css @@ -0,0 +1,11 @@ +.btn.activity { + color: #22247a; + background-color: #fff; + border-color: #22247a; +} + +.btn.activity:hover { + color: #fff; + background-color: #22247a; + border-color: #22247a; +} diff --git a/src/pages/Home/Components/Activities.js b/src/pages/Home/Components/Activities.js index 91bea22..7d66b77 100644 --- a/src/pages/Home/Components/Activities.js +++ b/src/pages/Home/Components/Activities.js @@ -1,49 +1,87 @@ -import React from 'react' -import ActivityCard from '../../../components/Activities/ActivityCard' -import KWoC from '../images/kwoc_logo.png' -import workshop19 from '../images/workshop.jpg' -import './common.css' -var activities = [ - { - img:'https://1.bp.blogspot.com/-Ig-v1tDXZt4/XDODmZvWp1I/AAAAAAAAB0A/KtbFdBPFVQw2O15FekkIR0Yg8MUp--rngCLcBGAs/s1600/GCI%2B-%2BVertical%2B-%2BGray%2BText%2B-%2BWhite%2BBG.png', - title:'Google CodeIN 2019-20', - text:'Competition for preschool.', - link:'/#/gci19' - }, - { - img:'https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://numfocus.org/wp-content/uploads/2017/03/vertical-gsoc-logo_1-1.jpg', - title:'Google Summer of Code 2019', - text:'Competition for undergraduate students.', - link:'/#/gsoc19' - }, - { - img:KWoC, - title:'Kharagpur Winter of Code 2019', - text:'Competition for undergraduate students.', - link:'/#/kwoc19' - }, - { - img:workshop19, - title:'Organized a Workshop/ Event At New Delhi Together With Women Who Code', - text:'Competition for undergraduate students.', - link:'/#/workshop19' - }, -] +import React from 'react'; +import ActivityCard from '../../../components/Activities/ActivityCard'; +import './common.css'; -const MapActivites = activities.map((activity,index)=>{return }) +class Activities extends React.Component { + constructor(props) { + super(props); + this.state = { + activities: [], + page: 'activities' + }; + } + componentDidMount() { + let activities = []; + fetch('https://medium-article-fetcher.herokuapp.com/posts', { + crossDomain: true, + method: 'GET', + headers: { 'Content-Type': 'application/json' } + }) + .then(res => { + return res.json(); + }) + .then(resData => { + for (let i = 0; i < 3; i++) { + let obj = {}; + obj.title = resData.items[i].title; + obj.link = resData.items[i].link; + let m, + urls = [], + str = resData.items[i].content_encoded, + rex = /]+src="?([^"\s]+)"?\s*\/>/g; -const Activities = () => { + while ((m = rex.exec(str))) { + urls.push(m[1]); + } + obj.img = urls[0]; + + let reg = /<\s*p[^>]*>([^<]*)<\s*\/\s*p\s*>/; + let stream = resData.items[i].content_encoded.match(reg); + + obj.description = + stream[1] + .split(' ') + .slice(0, 20) + .join(' ') + '...'; + + activities.push(obj); + } + this.setState({ activities: activities }); + }) + .catch(err => { + console.log(err); + }); + } + render() { return ( -
-

Activities

-
-
- {MapActivites} -
-
-
- ) +
+

Activities

+
+
+ {this.state.activities.map((currentActivity, index) => { + return ( +
+ +
+ ); + })} +
+
+ + Continue to the Blogs Page + +
+ ); + } } -export default Activities \ No newline at end of file +export default Activities;